/* ==========================================================================
   ronri.net -- Mid-Century Logic Lounge
   Colors: #0A1929, #B87333, #4A6A8A, #D4A843, #152238, #C8D0DC
   Fonts: Futura (system stack), Inter (Google Fonts)
   ========================================================================== */

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    font-weight: 400;
    color: #C8D0DC;
    background-color: #0A1929;
    overflow-x: hidden;
    position: relative;
}

/* --- Futura system font stack --- */
.hero__title,
.section-title,
.header__logo-text,
.footer__logo-text,
.card__title,
.concept-item__number,
.timeline-item__title {
    font-family: 'Futura', 'Century Gothic', 'AppleGothic', sans-serif;
    font-weight: 700;
}

/* --- Lens-Flare Overlays --- */
.lens-flare {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle at 30% 40%, rgba(212, 168, 67, 0.12), transparent 60%);
}

.lens-flare--secondary {
    background: radial-gradient(circle at 75% 20%, rgba(184, 115, 51, 0.08), transparent 50%);
}

/* --- Atomic Orbit Decorations --- */
.atomic-orbit {
    position: fixed;
    pointer-events: none;
    z-index: 0;
    border: 1px solid rgba(212, 168, 67, 0.1);
    border-radius: 50%;
}

.atomic-orbit--1 {
    width: 600px;
    height: 200px;
    top: 15%;
    right: -150px;
    transform: rotateX(60deg) rotateZ(15deg);
    border-color: rgba(212, 168, 67, 0.08);
    animation: orbit-drift 30s linear infinite;
}

.atomic-orbit--2 {
    width: 500px;
    height: 180px;
    top: 50%;
    left: -100px;
    transform: rotateX(60deg) rotateZ(-30deg);
    border-color: rgba(184, 115, 51, 0.08);
    animation: orbit-drift 25s linear infinite reverse;
}

.atomic-orbit--3 {
    width: 400px;
    height: 140px;
    bottom: 10%;
    right: 5%;
    transform: rotateX(60deg) rotateZ(45deg);
    border-color: rgba(74, 106, 138, 0.1);
    animation: orbit-drift 35s linear infinite;
}

@keyframes orbit-drift {
    0% { transform: rotateX(60deg) rotateZ(0deg); }
    100% { transform: rotateX(60deg) rotateZ(360deg); }
}

/* --- Starburst Decorations --- */
.starburst {
    position: fixed;
    pointer-events: none;
    z-index: 0;
}

.starburst--1 {
    width: 120px;
    height: 120px;
    top: 20%;
    left: 8%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg, rgba(212, 168, 67, 0.06) 5deg, transparent 10deg,
        transparent 30deg, rgba(212, 168, 67, 0.06) 35deg, transparent 40deg,
        transparent 60deg, rgba(212, 168, 67, 0.06) 65deg, transparent 70deg,
        transparent 90deg, rgba(212, 168, 67, 0.06) 95deg, transparent 100deg,
        transparent 120deg, rgba(212, 168, 67, 0.06) 125deg, transparent 130deg,
        transparent 150deg, rgba(212, 168, 67, 0.06) 155deg, transparent 160deg,
        transparent 180deg, rgba(212, 168, 67, 0.06) 185deg, transparent 190deg,
        transparent 210deg, rgba(212, 168, 67, 0.06) 215deg, transparent 220deg,
        transparent 240deg, rgba(212, 168, 67, 0.06) 245deg, transparent 250deg,
        transparent 270deg, rgba(212, 168, 67, 0.06) 275deg, transparent 280deg,
        transparent 300deg, rgba(212, 168, 67, 0.06) 305deg, transparent 310deg,
        transparent 330deg, rgba(212, 168, 67, 0.06) 335deg, transparent 340deg,
        transparent 360deg
    );
    animation: starburst-pulse 6s ease-in-out infinite alternate;
}

.starburst--2 {
    width: 80px;
    height: 80px;
    bottom: 30%;
    right: 12%;
    background: conic-gradient(
        from 15deg,
        transparent 0deg, rgba(184, 115, 51, 0.08) 5deg, transparent 10deg,
        transparent 30deg, rgba(184, 115, 51, 0.08) 35deg, transparent 40deg,
        transparent 60deg, rgba(184, 115, 51, 0.08) 65deg, transparent 70deg,
        transparent 90deg, rgba(184, 115, 51, 0.08) 95deg, transparent 100deg,
        transparent 120deg, rgba(184, 115, 51, 0.08) 125deg, transparent 130deg,
        transparent 150deg, rgba(184, 115, 51, 0.08) 155deg, transparent 160deg,
        transparent 180deg, rgba(184, 115, 51, 0.08) 185deg, transparent 190deg,
        transparent 210deg, rgba(184, 115, 51, 0.08) 215deg, transparent 220deg,
        transparent 240deg, rgba(184, 115, 51, 0.08) 245deg, transparent 250deg,
        transparent 270deg, rgba(184, 115, 51, 0.08) 275deg, transparent 280deg,
        transparent 300deg, rgba(184, 115, 51, 0.08) 305deg, transparent 310deg,
        transparent 330deg, rgba(184, 115, 51, 0.08) 335deg, transparent 340deg,
        transparent 360deg
    );
    animation: starburst-pulse 8s ease-in-out infinite alternate-reverse;
}

@keyframes starburst-pulse {
    0% { opacity: 0.4; transform: scale(1) rotate(0deg); }
    100% { opacity: 1; transform: scale(1.15) rotate(15deg); }
}

/* --- Header --- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: rgba(10, 25, 41, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(74, 106, 138, 0.15);
}

.header__nav {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header__logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.atom-icon {
    display: block;
}

.header__logo-text {
    font-size: 1.25rem;
    color: #D4A843;
    letter-spacing: 0.08em;
    text-transform: lowercase;
}

.header__links {
    list-style: none;
    display: flex;
    gap: 2rem;
}

.nav-link {
    color: #C8D0DC;
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    transition: color 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: #D4A843;
    transition: width 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.nav-link:hover {
    color: #D4A843;
}

.nav-link:hover::after {
    width: 100%;
}

/* --- Hero --- */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    padding: 6rem 2rem 4rem;
    text-align: center;
}

.hero__content {
    max-width: 700px;
}

.hero__title {
    font-size: clamp(2rem, 4.5vw, 4rem);
    color: #D4A843;
    letter-spacing: 0.06em;
    margin-bottom: 1.5rem;
    line-height: 1.15;
}

.hero__subtitle {
    font-size: 1.15rem;
    color: #C8D0DC;
    margin-bottom: 2.5rem;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.85;
}

.hero__cta {
    display: inline-block;
    padding: 0.9rem 2.5rem;
    border: 1.5px solid #D4A843;
    color: #D4A843;
    text-decoration: none;
    font-family: 'Futura', 'Century Gothic', 'AppleGothic', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 20px 40px;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.hero__cta:hover {
    background: #D4A843;
    color: #0A1929;
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(212, 168, 67, 0.3);
}

.hero__starburst-cluster {
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.2;
    animation: starburst-pulse 6s ease-in-out infinite alternate;
}

/* --- Section Shared --- */
.section-title {
    font-size: clamp(1.6rem, 3.5vw, 2.8rem);
    color: #D4A843;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
    text-align: center;
}

.section-intro {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 3rem;
    opacity: 0.8;
    font-size: 1.05rem;
}

/* --- Explore Section --- */
.explore {
    position: relative;
    z-index: 1;
    padding: 6rem 2rem;
}

.explore__container {
    max-width: 900px;
    margin: 0 auto;
}

.explore__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.card {
    background: rgba(21, 34, 56, 0.6);
    border: 1px solid rgba(74, 106, 138, 0.2);
    border-radius: 20px 40px;
    padding: 2.5rem 2rem;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 0%, rgba(212, 168, 67, 0.05), transparent 70%);
    pointer-events: none;
}

.card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(212, 168, 67, 0.35);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 40px rgba(212, 168, 67, 0.08);
}

.card__orbit {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
}

.card__orbit svg {
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.card:hover .card__orbit svg {
    transform: rotate(30deg) scale(1.1);
}

.card__title {
    font-size: 1.3rem;
    color: #D4A843;
    margin-bottom: 0.75rem;
    letter-spacing: 0.04em;
}

.card__text {
    font-size: 0.95rem;
    opacity: 0.75;
    line-height: 1.6;
}

/* --- Concepts Section --- */
.concepts {
    position: relative;
    z-index: 1;
    padding: 6rem 2rem;
    background: linear-gradient(180deg, transparent, rgba(21, 34, 56, 0.3), transparent);
}

.concepts__container {
    max-width: 900px;
    margin: 0 auto;
}

.concepts__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
}

.concept-item {
    background: rgba(10, 25, 41, 0.5);
    border: 1px solid rgba(74, 106, 138, 0.15);
    border-radius: 20px 40px;
    padding: 2rem;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
}

.concept-item:hover {
    transform: translateY(-5px);
    border-color: rgba(184, 115, 51, 0.35);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}

.concept-item__number {
    font-size: 2.2rem;
    color: #B87333;
    opacity: 0.4;
    display: block;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}

.concept-item:hover .concept-item__number {
    opacity: 0.8;
    color: #D4A843;
}

.concept-item__title {
    font-family: 'Futura', 'Century Gothic', 'AppleGothic', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: #C8D0DC;
    margin-bottom: 0.6rem;
    letter-spacing: 0.03em;
}

.concept-item__text {
    font-size: 0.9rem;
    opacity: 0.7;
    line-height: 1.65;
}

/* --- Methods Section --- */
.methods {
    position: relative;
    z-index: 1;
    padding: 6rem 2rem;
}

.methods__container {
    max-width: 900px;
    margin: 0 auto;
}

.methods__timeline {
    position: relative;
    padding-left: 3rem;
}

.methods__timeline::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #D4A843, #B87333, #4A6A8A, transparent);
}

.timeline-item {
    position: relative;
    padding-bottom: 3rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-item__marker {
    position: absolute;
    left: -3rem;
    top: 0.3rem;
    width: 24px;
    height: 24px;
    background: #0A1929;
    border: 2px solid #D4A843;
    border-radius: 50%;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 2;
}

.timeline-item__marker::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #D4A843;
    border-radius: 50%;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.timeline-item:hover .timeline-item__marker {
    transform: scale(1.3);
    border-color: #B87333;
    box-shadow: 0 0 20px rgba(212, 168, 67, 0.3);
}

.timeline-item:hover .timeline-item__marker::after {
    background: #B87333;
}

.timeline-item__content {
    background: rgba(21, 34, 56, 0.4);
    border: 1px solid rgba(74, 106, 138, 0.15);
    border-radius: 20px 40px;
    padding: 1.75rem 2rem;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.timeline-item:hover .timeline-item__content {
    border-color: rgba(212, 168, 67, 0.25);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.timeline-item__title {
    font-size: 1.2rem;
    color: #D4A843;
    margin-bottom: 0.3rem;
    letter-spacing: 0.03em;
}

.timeline-item__era {
    display: inline-block;
    font-size: 0.75rem;
    color: #B87333;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.timeline-item__text {
    font-size: 0.95rem;
    opacity: 0.75;
    line-height: 1.65;
}

/* --- About Section --- */
.about {
    position: relative;
    z-index: 1;
    padding: 6rem 2rem;
    background: linear-gradient(180deg, transparent, rgba(21, 34, 56, 0.3), transparent);
}

.about__container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 4rem;
}

.about__text-block {
    flex: 1;
}

.about__text-block .section-title {
    text-align: left;
}

.about__description {
    font-size: 1rem;
    opacity: 0.8;
    margin-bottom: 1.25rem;
    line-height: 1.75;
}

.about__atom-visual {
    flex-shrink: 0;
}

.about__atom-svg {
    animation: orbit-drift 20s linear infinite;
}

/* --- Footer --- */
.footer {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(74, 106, 138, 0.15);
    padding: 3rem 2rem;
}

.footer__container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.footer__brand {
    margin-bottom: 1.5rem;
}

.footer__logo-text {
    font-size: 1.5rem;
    color: #D4A843;
    letter-spacing: 0.08em;
    text-transform: lowercase;
}

.footer__tagline {
    font-size: 0.85rem;
    opacity: 0.5;
    margin-top: 0.3rem;
    font-style: italic;
}

.footer__links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.footer__link {
    color: #C8D0DC;
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    transition: color 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.footer__link:hover {
    color: #D4A843;
}

.footer__copy {
    font-size: 0.75rem;
    opacity: 0.35;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .header__links {
        gap: 1rem;
    }

    .nav-link {
        font-size: 0.8rem;
    }

    .hero__starburst-cluster {
        display: none;
    }

    .about__container {
        flex-direction: column;
        text-align: center;
    }

    .about__text-block .section-title {
        text-align: center;
    }

    .explore__cards {
        grid-template-columns: 1fr;
    }

    .concepts__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .header__links {
        display: none;
    }

    .hero__title {
        font-size: 2rem;
    }

    .methods__timeline {
        padding-left: 2.5rem;
    }
}