/* ================================================================
   MARLIN STEM — Hero Redesign
   Matches the premium layout from reference screenshot
   hero_redesign.css — overrides hero.css
================================================================ */

/* ── NAVBAR — logo large + centered links ── */

.navbar {
    height:          84px;
    padding:         0 4%;
    display:         grid;
    grid-template-columns: minmax(300px, auto) 1fr auto;
    align-items:     center;
    gap:             var(--space-6);
}

/* Logo — large circular badge */
.navbar > .navbar__logo {
    display:         flex;
    align-items:     center;
    gap:             14px;
    width:           fit-content;
    min-width:       0;
    padding:         8px 16px 8px 10px;
    border-radius:   var(--radius-md);
    text-decoration: none;
    background:      rgba(255, 255, 255, 0.92);
    border:          1px solid rgba(255, 255, 255, 0.72);
    box-shadow:      0 16px 40px rgba(5, 22, 48, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.navbar > .navbar__logo .navbar__logo-badge {
    width:           58px;
    height:          58px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    overflow:        hidden;
    border-radius:   var(--radius-sm);
    background:      #fff;
}

.navbar > .navbar__logo img {
    height:      100% !important;
    width:       100% !important;
    object-fit:  cover;
    object-position: center;
    border-radius: 0;
    border:      none;
    box-shadow:  none;
    transform:   scale(1.58);
    transition:  transform var(--duration-base) var(--ease);
}

.navbar > .navbar__logo img:hover {
    transform: scale(1.64);
}

.navbar > .navbar__logo .navbar__logo-mark { display: none; }

.navbar > .navbar__logo .navbar__logo-text {
    display:        block;
    color:          var(--primary-blue);
    font-family:    var(--font-display);
    font-size:      clamp(15px, 1.5vw, 21px);
    font-weight:    var(--weight-black);
    line-height:    1.05;
    letter-spacing: 0;
    white-space:    nowrap;
    text-transform: uppercase;
}

.navbar > .navbar__logo .navbar__logo-text strong {
    color:       var(--accent-green);
    font-weight: var(--weight-black);
}

.navbar.navbar--solid > .navbar__logo {
    background:   rgba(255, 255, 255, 0.96);
    border-color: rgba(226, 232, 240, 0.90);
    box-shadow:   0 10px 30px rgba(15, 23, 42, 0.10);
}

/* Nav links — center column */
.navbar__links {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-10);
}

.navbar__links a {
    font-size:   15px;
    font-weight: var(--weight-medium);
}

/* Right side — icons + CTA */
.navbar__right {
    display:     flex;
    align-items: center;
    gap:         var(--space-4);
}

/* Icon buttons (search, user) */
.navbar__icon-btn {
    width:           38px;
    height:          38px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       19px;
    cursor:          pointer;
    transition:      var(--transition);
    border:          none;
    background:      transparent;
}

.navbar--transparent .navbar__icon-btn { color: rgba(255,255,255,0.75); }
.navbar--solid       .navbar__icon-btn { color: var(--grey-500); }
.navbar__icon-btn:hover { background: rgba(245,251,255,0.10); color: white; }

/* CTA button */
.navbar__cta {
    padding:       10px 22px;
    border-radius: var(--radius);
    font-size:     14px;
    font-weight:   var(--weight-semi);
    border:        2px solid transparent;
}

.navbar--transparent .navbar__cta {
    background:   var(--primary-blue);
    color:        var(--white);
    border-color: var(--primary-blue);
}
.navbar--solid .navbar__cta {
    background:   var(--secondary-blue);
    color:        var(--white);
    border-color: var(--secondary-blue);
}
.navbar__cta:hover {
    background:   var(--secondary-blue) !important;
    color:        var(--white) !important;
    border-color: var(--secondary-blue) !important;
}


/* ── HERO — full redesign ── */

.hero {
    min-height:      100vh;
    justify-content: flex-start;
    padding-top:     0;
    overflow:        hidden;
    position:        relative;
    background:      #0b3d91;
}

.hero__bg {
    position: absolute;
    inset:    0;
    z-index:  0;
    background:
        linear-gradient(
            90deg,
            rgba(6, 30, 73, 0.84) 0%,
            rgba(7, 42, 96, 0.70) 42%,
            rgba(7, 42, 96, 0.34) 68%,
            rgba(7, 42, 96, 0.16) 100%
        ),
        linear-gradient(
            180deg,
            rgba(6, 30, 73, 0.20) 0%,
            rgba(6, 30, 73, 0.06) 48%,
            rgba(6, 30, 73, 0.38) 100%
        ),
        url("../assets/images/campus.png") center center / cover no-repeat;
    background-attachment: scroll;
}

.hero__grid {
    z-index:  1;
    opacity:  0.18;
    mix-blend-mode: soft-light;
}

.hero__glow,
.hero__particles {
    z-index: 1;
    opacity: 0.55;
}

/* Subtle warm gradient sweep top-right */
.hero::after {
    content:    '';
    position:   absolute;
    top:        0;
    right:      0;
    width:      420px;
    height:     420px;
    background: radial-gradient(
        ellipse at top right,
        rgba(95, 174, 227, 0.18) 0%,
        transparent 65%
    );
    pointer-events: none;
    z-index:    1;
}

.hero__content {
    position:   relative;
    z-index:    2;
    padding:    116px 5% 0;  /* 76px navbar + 40px breathing room */
    max-width:  900px;
}

/* Eyebrow */
.hero__eyebrow {
    display:        flex;
    align-items:    center;
    gap:            10px;
    margin-bottom:  var(--space-6);
    font-size:      12px;
    font-weight:    var(--weight-bold);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color:          var(--accent-green);
}

.hero__eyebrow-line {
    width:      40px;
    height:     2px;
    background: var(--accent-green);
    flex-shrink:0;
}

.hero__eyebrow-dot {
    width:      7px;
    height:     7px;
    border-radius: 50%;
    background: var(--accent-green);
    flex-shrink:0;
}

/* Main heading — large, flowing, inline style */
.hero__heading {
    font-family:    var(--font-display);
    font-size:      clamp(36px, 5.5vw, 68px);
    font-weight:    var(--weight-bold);
    line-height:    1.08;
    letter-spacing: -0.025em;
    color:          var(--white);
    margin-bottom:  var(--space-6);
}

/* Cyan italic inline — "AI-Powered" */
.hero__heading em {
    font-style:              italic;
    background:              linear-gradient(135deg, var(--cyan-500), #d9efff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
    display:                 inline;   /* inline — not block */
}

/* Cyan non-italic — "STEM" on its own line */
.hero__heading .cyan-word {
    color:                   var(--cyan-500);
    -webkit-text-fill-color: var(--cyan-500);
    display:                 block;
}

/* Description — larger, paragraph style */
.hero__description {
    font-size:     clamp(15px, 1.6vw, 17px);
    font-weight:   var(--weight-normal);
    line-height:   1.75;
    color:         rgba(255, 255, 255, 0.78);
    max-width:     640px;
    margin-bottom: var(--space-8);
}

.hero__description strong {
    color:       var(--white);
    font-weight: var(--weight-semi);
}

/* CTA buttons row */
.hero__actions {
    display:     flex;
    align-items: center;
    gap:         var(--space-4);
    flex-wrap:   wrap;
}

/* Primary — solid cyan */
.hero__btn-primary {
    background:      var(--cyan-500);
    color:           var(--navy-800);
    border:          2px solid var(--cyan-500);
    padding:         14px 36px;
    border-radius:   var(--radius);
    font-size:       15px;
    font-weight:     var(--weight-bold);
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-2);
    transition:      var(--transition);
    text-decoration: none;
    white-space:     nowrap;
}

.hero__btn-primary:hover {
    background: transparent;
    color:      var(--cyan-500);
    transform:  translateY(-2px);
    box-shadow: 0 8px 30px rgba(95,174,227,0.30);
}

/* Secondary — white outline */
.hero__btn-secondary {
    background:      transparent;
    color:           var(--white);
    border:          2px solid rgba(245,251,255,0.55);
    padding:         14px 36px;
    border-radius:   var(--radius);
    font-size:       15px;
    font-weight:     var(--weight-semi);
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-2);
    transition:      var(--transition);
    text-decoration: none;
    white-space:     nowrap;
}

.hero__btn-secondary:hover {
    border-color: var(--white);
    background:   rgba(245,251,255,0.08);
}

/* Stats bar — sits at very bottom */
.hero__stats {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    z-index:    2;
    display:    flex;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255,255,255,0.09);
}

.hero__stat {
    flex:            1;
    padding:         20px 16px;
    text-align:      center;
    border-right:    1px solid rgba(255,255,255,0.07);
    transition:      background var(--duration-base) var(--ease);
}

.hero__stat:last-child { border-right: none; }
.hero__stat:hover      { background: rgba(200,165,92,0.08); }

.hero__stat-number {
    font-family:   var(--font-display);
    font-size:     clamp(22px, 2.8vw, 34px);
    font-weight:   var(--weight-bold);
    color:         var(--white);
    line-height:   1;
    margin-bottom: 4px;
    display:       flex;
    align-items:   baseline;
    justify-content: center;
    gap:           2px;
}

.hero__stat-number sup {
    font-size:   clamp(12px, 1.4vw, 16px);
    color:       var(--cyan-500);
    font-family: var(--font-body);
}

.hero__stat-label {
    font-size:      10px;
    color:          rgba(255,255,255,0.40);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-weight:    var(--weight-medium);
}

/* Decorative sparkle — bottom right corner */
.hero__sparkle {
    position:     absolute;
    bottom:       100px;
    right:        5%;
    z-index:      2;
    color:        rgba(255,255,255,0.15);
    font-size:    42px;
    pointer-events:none;
    animation:    sparkleSpin 8s linear infinite;
}

@keyframes sparkleSpin {
    0%   { transform: rotate(0deg)   scale(1);    opacity: 0.15; }
    50%  { transform: rotate(180deg) scale(1.15); opacity: 0.30; }
    100% { transform: rotate(360deg) scale(1);    opacity: 0.15; }
}


/* ── RESPONSIVE ── */

@media (max-width: 900px) {
    .navbar {
        grid-template-columns: auto 1fr auto;
    }
    .navbar__links { gap: var(--space-6); }
    .navbar__icon-btn { display: none; }
}

@media (max-width: 768px) {
    .navbar {
        grid-template-columns: auto 1fr auto;
        height: 64px;
    }
    .navbar__links { display: none; }
    .navbar > .navbar__logo {
        gap:     10px;
        padding: 7px 12px 7px 8px;
    }
    .navbar > .navbar__logo .navbar__logo-badge {
        width:  46px;
        height: 46px;
    }
    .navbar > .navbar__logo .navbar__logo-text {
        font-size: 13px;
    }
    .hero__content { padding-top: 100px; }
    .hero__heading { font-size: clamp(30px, 8vw, 44px); }
    .hero__stat    { padding: 14px 8px; }
    .hero__sparkle { display: none; }
}

@media (max-width: 480px) {
    .navbar > .navbar__logo .navbar__logo-text {
        max-width: 170px;
        white-space: normal;
    }
    .hero__heading     { font-size: 30px; }
    .hero__description { font-size: 14px; }
    .hero__actions     { flex-direction: column; align-items: stretch; }
    .hero__btn-primary,
    .hero__btn-secondary { justify-content: center; padding: 13px 24px; }
}