/* ----------------------------------------------------------------------------
   landing-modern.css
   SR 20260424 - Modernized hero / login styling for Default.aspx, intended to
   pair visually with picom365.com (dark charcoal palette, deep crimson CTA,
   heavy uppercase wordmark, off-white input fields). Scoped under
   `#landing.modern-hero` so the existing landing.css cannot leak into it and
   so the sections below the hero (#idealFor, #howItWorks, #pricing, #about)
   keep their current look.
   ---------------------------------------------------------------------------- */

#landing.modern-hero {
    width: 100%;
    min-height: 100vh;
    display: block;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    /* Dark charcoal close to picom365.com, with a subtle radial highlight on
       the left so the wordmark area has a touch of depth without committing
       to a hero photograph. */
    background:
        radial-gradient(ellipse at 25% 35%, rgba(70,70,80,0.35) 0%, rgba(0,0,0,0) 55%),
        linear-gradient(180deg, #1a1a1c 0%, #141416 100%);
    color: #ffffff;
    font-family: "Inter", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    overflow: hidden;
}

/* Top nav -------------------------------------------------------------- */
#landing.modern-hero .modern-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    /* Logo on the left, link list on the right -- same layout pattern as
       scimage.com's nav. */
    justify-content: space-between;
    padding: 1.2em 2.5em;
    z-index: 5;
    transform: none;
}

#landing.modern-hero .modern-nav .brand-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

#landing.modern-hero .modern-nav .brand-logo:hover {
    opacity: 0.8;
    text-decoration: none;
    background: transparent;
}

#landing.modern-hero .modern-nav .brand-logo img {
    /* Source asset is 110x40. Sized at 40px tall (its native height) so the
       wordmark stays crisp on standard displays and the nav sits at a
       comfortable height; scales down on small screens via media query. */
    height: 40px;
    width: auto;
    display: block;
    border: 0;
}

#landing.modern-hero .modern-nav ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    transform: none;
}

#landing.modern-hero .modern-nav li {
    margin: 0 1.2em;
    float: none;
}

#landing.modern-hero .modern-nav li a {
    color: #d6d6d6;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 500;
    text-decoration: none;
    text-shadow: none;
    padding: 0.5em 0;
    transition: color 0.15s ease;
}

#landing.modern-hero .modern-nav li a:hover {
    color: #ffffff;
    background: transparent;
    text-decoration: none;
}

/* Main hero grid ------------------------------------------------------- */
#landing.modern-hero .hero-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4em;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 7em 4em 4em 4em;
    min-height: 100vh;
    box-sizing: border-box;
}

/* Left column: wordmark + tagline + CTA -------------------------------- */
#landing.modern-hero .hero-brand {
    flex: 1 1 60%;
    max-width: 60%;
}

#landing.modern-hero .wordmark {
    font-size: clamp(3.4em, 7vw, 6em);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 0.95;
    margin: 0 0 0.4em 0;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: none;
}

#landing.modern-hero .wordmark .accent {
    color: #B22234;
}

#landing.modern-hero .tagline {
    color: #c8c8c8;
    font-size: 1.05em;
    font-weight: 400;
    line-height: 1.6;
    margin: 0 0 2em 0;
    max-width: 38em;
}

#landing.modern-hero .tagline a {
    color: #d8d8d8;
    text-decoration: underline;
    text-decoration-color: rgba(216,216,216,0.4);
}

#landing.modern-hero .hero-cta {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
    align-items: center;
}

#landing.modern-hero .btn-primary-cta,
#landing.modern-hero .btn-secondary-cta {
    display: inline-block;
    padding: 0.95em 2.4em;
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
    border-radius: 0;
    text-shadow: none;
}

#landing.modern-hero .btn-primary-cta {
    background: #B22234;
    color: #ffffff;
}

#landing.modern-hero .btn-primary-cta:hover {
    background: #9a1d2c;
    color: #ffffff;
    text-decoration: none;
}

#landing.modern-hero .btn-secondary-cta {
    background: #5a5a5a;
    color: #ffffff;
}

#landing.modern-hero .btn-secondary-cta:hover {
    background: #6e6e6e;
    color: #ffffff;
    text-decoration: none;
}

/* Right column: login card -------------------------------------------- */
#landing.modern-hero .hero-card {
    flex: 0 0 380px;
    max-width: 420px;
    background: rgba(40, 40, 44, 0.92);
    border: 1px solid rgba(255,255,255,0.04);
    padding: 2.4em 2.2em 2em 2.2em;
    box-sizing: border-box;
    color: #d6d6d6;
}

#landing.modern-hero .hero-card .card-title {
    font-size: 1.05em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    color: #ffffff;
    margin: 0 0 1.6em 0;
    padding: 0;
}

#landing.modern-hero .hero-card .card-input {
    display: block;
    width: 100%;
    padding: 0.95em 1em;
    margin: 0 0 1em 0;
    box-sizing: border-box;
    border: none;
    border-radius: 2px;
    background: #ecebf2;
    color: #1a1a1c;
    font-size: 0.95em;
    font-family: inherit;
    outline: none;
    transition: background 0.15s ease;
}

#landing.modern-hero .hero-card .card-input::placeholder {
    color: #8a8aa0;
}

#landing.modern-hero .hero-card .card-input:focus {
    background: #ffffff;
}

#landing.modern-hero .hero-card .card-help {
    margin: 0 0 1.4em 0;
    font-size: 0.78em;
    color: #9a9aa0;
}

#landing.modern-hero .hero-card .card-help a {
    color: #c8c8d0;
    text-decoration: underline;
    text-decoration-color: rgba(200,200,208,0.35);
}

#landing.modern-hero .hero-card .card-help a:hover {
    color: #ffffff;
}

#landing.modern-hero .hero-card .card-help .sep {
    margin: 0 0.6em;
    color: #555;
}

#landing.modern-hero .hero-card input[type=submit].btn-login {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: auto;
    padding: 1em 1.2em;
    margin: 0;
    border: none;
    border-radius: 2px;
    background: #B22234;
    color: #ffffff;
    font-family: inherit;
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: background 0.15s ease;
    box-shadow: none;
    text-shadow: none;
}

#landing.modern-hero .hero-card input[type=submit].btn-login:hover {
    background: #9a1d2c;
}

#landing.modern-hero .hero-card .card-error {
    margin-top: 1em;
    min-height: 1em;
    color: #ff8a8a;
    font-size: 0.85em;
}

#landing.modern-hero .hero-card .card-error :where(.Err, .noErr) {
    text-align: left !important;
    color: inherit;
}

#landing.modern-hero .hero-card .card-disclaimer {
    margin: 1.6em 0 0 0;
    padding-top: 1.4em;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 0.72em;
    line-height: 1.55;
    color: #7a7a82;
}

#landing.modern-hero .hero-card .card-disclaimer a {
    color: #9a9aa0;
    text-decoration: underline;
}

/* Responsive ----------------------------------------------------------- */
@media (max-width: 960px) {
    #landing.modern-hero .hero-grid {
        flex-direction: column;
        gap: 2.5em;
        padding: 6em 1.5em 3em 1.5em;
        align-items: stretch;
    }

    #landing.modern-hero .hero-brand {
        flex: 1 1 auto;
        max-width: 100%;
        text-align: left;
    }

    #landing.modern-hero .hero-card {
        flex: 1 1 auto;
        max-width: 100%;
        align-self: center;
        width: 100%;
    }

    #landing.modern-hero .modern-nav {
        padding: 1em 1.2em;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.6em;
    }

    #landing.modern-hero .modern-nav .brand-logo img {
        /* Slightly smaller on narrow screens so the logo + wrapped links
           don't push the hero content too far down. */
        height: 32px;
    }

    #landing.modern-hero .modern-nav li {
        margin: 0.3em 0.7em;
    }
}

@media (max-width: 520px) {
    #landing.modern-hero .wordmark {
        font-size: 2.6em;
    }

    #landing.modern-hero .hero-card {
        padding: 1.8em 1.4em 1.6em 1.4em;
    }
}

/* Scroll cue ----------------------------------------------------------- */
/* Persistent "About PicomCloud" cue at the bottom of the hero. Two stacked
   chevrons in the brand red bounce with a staggered animation, clearly
   pointing the user to scroll. Stays visible during scroll (no
   .indicate-scroll class -> defaultPage.js leaves it alone). */
#landing.modern-hero .scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 1.8em;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7em;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    z-index: 4;
    transition: color 0.2s ease, transform 0.2s ease;
    padding: 0.4em 0.8em;
}

#landing.modern-hero .scroll-hint:hover,
#landing.modern-hero .scroll-hint:focus {
    color: #ffffff;
    text-decoration: none;
    outline: none;
    transform: translateX(-50%) translateY(2px);
}

#landing.modern-hero .scroll-label {
    font-size: 0.95em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    /* Visual offset for letter-spacing on the right edge so the label still
       reads centered above the chevrons. */
    padding-left: 0.22em;
    /* Subtle glow so the label pops against any tone of dark background. */
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* Two stacked down-chevrons. Each chevron is built from two CSS borders
   rotated 45deg -- pure CSS, no images, no SVG. Sized generously so the
   "scroll down" intent is obvious. */
#landing.modern-hero .scroll-chevrons {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 34px;
}

#landing.modern-hero .scroll-chevrons .chev {
    display: block;
    width: 18px;
    height: 18px;
    border-right: 3px solid #B22234;
    border-bottom: 3px solid #B22234;
    transform: rotate(45deg);
    /* Soft red halo so the chevrons read against any background tone. */
    filter: drop-shadow(0 0 4px rgba(178, 34, 52, 0.55));
    animation: scroll-chev-bounce 1.6s ease-in-out infinite;
    opacity: 0;
}

/* Stagger: top chevron leads, bottom chevron follows half a beat behind.
   Result is a continuous "wave" pointing downward. */
#landing.modern-hero .scroll-chevrons .chev:nth-child(1) {
    animation-delay: 0s;
}

#landing.modern-hero .scroll-chevrons .chev:nth-child(2) {
    animation-delay: 0.25s;
}

@keyframes scroll-chev-bounce {
    0%   { opacity: 0; transform: rotate(45deg) translate(-4px, -4px); }
    40%  { opacity: 1; transform: rotate(45deg) translate(0, 0); }
    80%  { opacity: 1; transform: rotate(45deg) translate(4px, 4px); }
    100% { opacity: 0; transform: rotate(45deg) translate(6px, 6px); }
}

/* Hide the cue on very short viewports where it would crowd the hero card. */
@media (max-height: 600px) {
    #landing.modern-hero .scroll-hint {
        display: none;
    }
}