/* Hero Section */
.hero-section {
    position: relative;
    background-color: var(--color-navy);
    padding-top: var(--space-80);
    padding-bottom: 0; 
    overflow-x: hidden;
}

/* Decorations */
.hero-decor {
    position: absolute;
    color: var(--color-sky-bright);
    opacity: 0.3;
    z-index: 1;
}

.decor-cloud {
    top: 5%;
    right: 8%;
    width: 90px;
    height: 60px;
}

.decor-pen {
    top: 5%;
    left: 8%;
    width: 50px;
    height: 50px;
    transform: rotate(-15deg);
}

.decor-arrow {
    bottom: 20%;
    left: 8%;
    width: 80px;
    height: 80px;
}

/* Hero Content */
.hero-content {
    position: relative;
    z-index: 2;
    padding-bottom: var(--space-80); 
}

.hero-title {
    color: var(--color-white);
    font-size: var(--fs-52);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    margin-bottom: var(--space-16);
}

.text-sky {
    color: var(--color-sky-bright);
}

.hero-squiggle {
    margin: 0 auto var(--space-24);
    width: 120px;
    height: 20px;
}

.hero-squiggle svg {
    width: 100%;
    height: 100%;
}

.hero-description {
    color: var(--color-hero-text);
    font-size: var(--fs-18);
    line-height: var(--lh-base);
    max-width: 600px;
    margin: 0 auto var(--space-40);
}

/* Hero Buttons */
.hero-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-16);
}

.btn-hero-primary {
    background-color: var(--color-blue);
    color: var(--color-white);
    font-size: var(--fs-16);
    font-weight: var(--fw-semibold);
    padding: var(--space-12) var(--space-32);
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: all var(--transition);
    border: none;
}

.btn-hero-primary:hover {
    background-color: var(--color-blue-dark);
    color: var(--color-white);
}

.btn-hero-secondary {
    background-color: transparent;
    color: var(--color-white);
    font-size: var(--fs-16);
    font-weight: var(--fw-semibold);
    padding: var(--space-12) var(--space-32);
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: all var(--transition);
    border: 1px solid var(--color-sky);
}

.btn-hero-secondary:hover {
    background-color: var(--color-sky);
    color: var(--color-navy);
}

/* Hero Wave */
.hero-wave {
    width: 100%;
    height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120 L0,60 C240,120 480,0 720,60 C960,120 1200,0 1440,60 L1440,120 Z' fill='%23F8FcFF'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: 300px 100%;
    position: relative;
    z-index: 1;
}

/* Hero Circles */
.hero-circles-wrapper {
    position: relative;
    z-index: 5;
    top: -120px;
    margin-bottom: 0;
    margin-top: 0;
}

.hero-circles-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.hero-circle {
    display: block;
    width: clamp(120px, 22vw, 240px);
    height: clamp(120px, 22vw, 240px);
    border-radius: var(--radius-round);
    text-decoration: none;
    position: relative;
    transition: transform var(--transition);
    box-shadow: 
        0 0 0 4px var(--color-white), 
        0 0 0 7px var(--color-overlay-light), 
        var(--shadow-md);
    flex-shrink: 1;
}

.circle-inner {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-round);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10%;
}

.circle-icon {
    width: clamp(30px, 5vw, 50px);
    height: clamp(30px, 5vw, 50px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-8);
    font-size: clamp(14px, 2vw, 24px);
    box-shadow: var(--shadow-sm);
}

.circle-title {
    font-size: clamp(10px, 1.5vw, 18px);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-2);
}

.circle-subtitle {
    font-size: clamp(8px, 1vw, 13px);
    margin: 0;
    opacity: 0.9;
}

/* Circle Colors */
.circle-style-1 .circle-inner {
    background-color: var(--color-navy);
    color: var(--color-white);
}

.circle-style-1 .circle-title {
    color: var(--color-white);
}

.circle-style-1 .circle-subtitle {
    color: var(--color-hero-text);
}

.circle-style-1 .circle-icon {
    background-color: var(--color-overlay-light);
    color: var(--color-white);
}

.circle-style-2 .circle-inner {
    background-color: var(--color-sky-bright);
    color: var(--color-navy); 
}

.circle-style-2 .circle-title {
    color: var(--color-navy);
}

.circle-style-2 .circle-subtitle {
    color: var(--color-text-soft);
}

.circle-style-2 .circle-icon {
    background-color: var(--color-navy);
    color: var(--color-white);
}

.circle-style-3 .circle-inner {
    background-color: var(--color-blue);
    color: var(--color-white);
}

.circle-style-3 .circle-title {
    color: var(--color-white);
}

.circle-style-3 .circle-subtitle {
    color: var(--color-surface-soft);
}

.circle-style-3 .circle-icon {
    background-color: var(--color-overlay-light);
    color: var(--color-white);
}

/* Responsive - Min Widths */
@media (min-width: 769px) {
    .hero-wave {
        background-size: 400px 100%;
        height: 70px;
    }
}

@media (min-width: 1200px) {
    .hero-wave {
        background-size: 500px 100%;
        height: 80px;
    }
}

/* Responsive - Max Widths */
@media (max-width: 992px) {
    .decor-cloud { 
        top: 4%; 
        right: 5%; 
        width: 70px; 
        height: 45px; 
    }
    
    .decor-pen { 
        top: 4%; 
        left: 5%; 
        width: 40px; 
        height: 40px; 
    }
    
    .decor-arrow { 
        bottom: 10%; 
        left: 5%; 
        width: 60px; 
        height: 60px; 
    }

    .hero-circles-wrapper {
        top: -120px;
    }
}

@media (max-width: 768px) {
    .hero-content {
        padding-bottom: var(--space-56); 
    }

    .hero-title { 
        font-size: var(--fs-34); 
    }
    
    .hero-description { 
        font-size: var(--fs-16); 
        padding: 0 var(--space-16); 
    }
    
    .hero-buttons { 
        flex-direction: column; 
        width: 100%; 
        padding: 0 var(--space-20); 
    }
    
    .btn-hero-primary, 
    .btn-hero-secondary { 
        width: 100%; 
    }
    
    .decor-cloud { 
        top: 3%; 
        right: 5%; 
        width: 60px; 
        height: 40px; 
        opacity: 0.2; 
    }
    
    .decor-pen { 
        top: 3%; 
        left: 5%; 
        width: 40px; 
        height: 40px; 
    }
    
    .decor-arrow { 
        bottom: 8%; 
        left: 5%; 
        width: 50px; 
        height: 50px; 
    }
    
    .hero-circles-wrapper {
        top: -100px;
    }
}

@media (max-width: 400px) {
    .hero-circle {
        width: 28vw;
        height: 28vw;
        box-shadow: 
            0 0 0 2px var(--color-white), 
            0 0 0 4px var(--color-overlay-light), 
            var(--shadow-sm);
    }

    .circle-icon {
        width: 8vw;
        height: 8vw;
        font-size: 4vw;
        margin-bottom: 2px;
    }

    .circle-title {
        font-size: 3vw;
    }

    .circle-subtitle {
        font-size: 2.2vw;
    }
    
    .circle-inner {
        padding: 5%;
    }

    .hero-circles-wrapper {
        top: -80px;
    }
}


/* Bottom Wave Section */
.wave-bottom {
    width: 100%;
    height: 60px;
    background-color: var(--color-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,60 C1200,120 960,0 720,60 C480,120 240,0 0,60 Z' fill='%230b3a6b'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: top;
    background-size: 300px 100%;
    line-height: 0;
}

@media (min-width: 769px) {
    .wave-bottom {
        background-size: 400px 100%;
        height: 70px;
    }
}

@media (min-width: 1200px) {
    .wave-bottom {
        background-size: 500px 100%;
        height: 80px;
    }
}