/* ==========================================================================
   front.css -- the public front page (index.php) and the sign-in page.
   Rich green from the logo on black. Loaded after app.css, which supplies
   the AbcPrint font and the base reset.
   ========================================================================== */

:root {
    --rich:        #005826;   /* the green inside the abc123class logo */
    --rich-lt:     #0a7a3a;
    --rich-hi:     #7fdc8f;   /* small accents and ticks on black */
    --rich-glow:   rgba(0, 160, 70, 0.35);
    --logo-yellow: #fff568;   /* the logo's outline; used only on the price */
    --ink-soft:    #c9d3cc;
    --front-max:   1180px;
}

body.front {
    height: auto;
    background: #000000;
    color: #ffffff;
    font-size: 17px;
    line-height: 1.55;
    overflow-x: hidden;
}

.front-wrap {
    width: 100%;
    max-width: var(--front-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Top bar ------------------------------------------------------------ */

.top {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.92);
    border-bottom: 3px solid var(--rich);
    backdrop-filter: blur(6px);
}
.top-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 72px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    text-decoration: none;
    font-family: "AbcPrint", Helvetica, Arial, sans-serif;
    font-size: 28px;
    letter-spacing: 1px;
}
.brand img { width: 48px; height: 48px; }

.top-price {
    margin-left: 6px;
    padding: 4px 12px;
    border: 2px solid var(--rich);
    border-radius: 999px;
    color: var(--rich-hi);
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
}

.top-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.nav-link {
    display: inline-block;
    padding: 9px 16px;
    border: 2px solid transparent;
    border-radius: 8px;
    color: #ffffff;
    font-family: "AbcPrint", Helvetica, Arial, sans-serif;
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    transition: background 120ms linear, border-color 120ms linear;
}
a.nav-link[href]:hover,
a.nav-link[href]:focus-visible { border-color: var(--rich-hi); outline: none; }
.nav-link.is-outline { border-color: var(--rich); }
.nav-link.is-solid   { background: var(--rich); border-color: var(--rich); }
.nav-link.is-solid[href]:hover { background: var(--rich-lt); }
/*  Not connected yet: no href, so it is not a link at all. */
.nav-link:not([href]) { cursor: default; opacity: 0.8; }

/* --- Hero --------------------------------------------------------------- */

.hero {
    position: relative;
    padding: 64px 0 72px;
    background:
        radial-gradient(ellipse at 15% 20%, rgba(0, 88, 38, 0.55) 0%, rgba(0, 0, 0, 0) 55%),
        #000000;
    overflow: hidden;
}
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 48px;
    align-items: center;
}
.hero h1 {
    margin: 0 0 18px;
    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.08;
}
.hero h1 em {
    font-style: normal;
    color: var(--rich-hi);
}
.hero-lede {
    margin: 0 0 30px;
    max-width: 34em;
    color: var(--ink-soft);
    font-size: 19px;
}

.price-badge {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 30px;
    padding: 14px 24px 14px 18px;
    background: var(--rich);
    border-radius: 16px;
    box-shadow: 0 0 40px var(--rich-glow);
}
.price-badge .only {
    font-family: "AbcPrint", Helvetica, Arial, sans-serif;
    font-size: 22px;
    line-height: 1;
}
.price-badge .amount {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 64px;
    line-height: 1;
    color: var(--logo-yellow);
}
.price-badge .per {
    font-size: 15px;
    line-height: 1.25;
}
.price-badge .per strong { display: block; font-size: 20px; }

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
}
.btn-front {
    display: inline-block;
    padding: 14px 30px;
    background: var(--rich);
    border: 2px solid var(--rich);
    border-radius: 10px;
    color: #ffffff;
    font-family: "AbcPrint", Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    transition: background 120ms linear, border-color 120ms linear;
}
.btn-front[href]:hover,
.btn-front[href]:focus-visible { background: var(--rich-lt); border-color: var(--rich-hi); outline: none; }
.btn-front:not([href]) { cursor: default; }
.text-link {
    color: var(--rich-hi);
    font-weight: bold;
    text-decoration: none;
}
.text-link:hover { text-decoration: underline; }

/* The collage: three columns of screenshots, tilted, drifting slowly. */
.collage {
    position: relative;
    height: 560px;
    -webkit-mask-image:
        linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%),
        linear-gradient(to right,  transparent 0, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image:
        linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%),
        linear-gradient(to right,  transparent 0, #000 10%, #000 90%, transparent 100%);
            mask-composite: intersect;
}
.collage-tilt {
    position: absolute;
    inset: -60px -40px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    transform: rotate(-7deg);
}
.collage-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: drift 26s ease-in-out infinite alternate;
}
.collage-col:nth-child(2) { margin-top: -90px; animation-direction: alternate-reverse; }
.collage-col:nth-child(3) { margin-top: -30px; animation-duration: 32s; }
.collage img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 2px solid rgba(127, 220, 143, 0.35);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
}
@keyframes drift {
    from { transform: translateY(0); }
    to   { transform: translateY(-120px); }
}
@media (prefers-reduced-motion: reduce) {
    .collage-col { animation: none; }
}

/* --- Zig-zag feature sections ------------------------------------------ */
/*  Each section is one <section class="feature img-left|img-right">.
 *  The image side only changes the column order; the markup is the same. */

.features-intro {
    padding: 70px 0 10px;
    text-align: center;
}
.features-intro h2 {
    margin: 0 0 10px;
    font-size: clamp(30px, 4vw, 44px);
}
.features-intro p { margin: 0 auto; max-width: 40em; color: var(--ink-soft); }

.feature {
    padding: 70px 0;
    border-bottom: 1px solid #12301e;
}
.feature-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}
.feature.img-right .feature-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.feature.img-right .feature-media { order: 2; }

.feature-media {
    position: relative;
    padding-bottom: 8%;
}
.feature-media .shot-main {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 3px solid var(--rich);
    box-shadow: 0 0 50px var(--rich-glow), 0 20px 40px rgba(0, 0, 0, 0.8);
}
/*  Extra images sit as small cards over the outer bottom corner. */
.shot-extras {
    position: absolute;
    bottom: 0;
    right: -18px;
    display: flex;
    gap: 12px;
    width: 58%;
}
.feature.img-right .shot-extras { right: auto; left: -18px; }
.shot-extras img {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    border-radius: 10px;
    border: 2px solid var(--rich-hi);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.85);
}
.feature.img-left  .shot-extras img:nth-child(odd)  { transform: rotate(3deg); }
.feature.img-left  .shot-extras img:nth-child(even) { transform: rotate(-2deg); }
.feature.img-right .shot-extras img:nth-child(odd)  { transform: rotate(-3deg); }
.feature.img-right .shot-extras img:nth-child(even) { transform: rotate(2deg); }

.feature-kicker {
    margin: 0 0 8px;
    color: var(--rich-hi);
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.feature h2 {
    margin: 0 0 16px;
    font-size: clamp(30px, 3.6vw, 42px);
    line-height: 1.1;
}
.feature-text { margin: 0 0 20px; color: var(--ink-soft); }

.ticks {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ticks li {
    position: relative;
    padding: 0 0 10px 34px;
}
.ticks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--rich)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / 15px no-repeat;
}

.tag-groups { margin-top: 18px; }
.tag-group { margin-bottom: 12px; }
.tag-group h3 {
    margin: 0 0 6px;
    font-size: 20px;
    color: #ffffff;
}
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span {
    padding: 3px 11px;
    border: 1px solid var(--rich);
    border-radius: 999px;
    background: #06180d;
    color: var(--ink-soft);
    font-size: 14px;
}
.tags .tag-more {
    border-style: dashed;
    background: transparent;
    font-style: italic;
}

/* --- Pricing card ------------------------------------------------------- */

.pricing {
    padding: 80px 0 90px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(0, 88, 38, 0.45) 0%, rgba(0, 0, 0, 0) 60%),
        #000000;
}
.price-card {
    max-width: 560px;
    margin: 0 auto;
    background: #07140c;
    border: 3px solid var(--rich);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 70px var(--rich-glow);
}
.price-card-head {
    padding: 30px 30px 26px;
    background: var(--rich);
    text-align: center;
}
.price-card-head h2 { margin: 0 0 8px; font-size: 34px; }
.price-card-head .amount {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 76px;
    line-height: 1;
    color: var(--logo-yellow);
}
.price-card-head .amount small { font-size: 24px; color: #ffffff; }
.price-card-head .note { margin: 8px 0 0; font-size: 16px; }
.price-card-body { padding: 30px 34px 34px; }
.price-card-body .ticks { margin-bottom: 28px; }
.price-card-body .btn-front { display: block; width: 100%; font-size: 26px; }

/* --- Log in page (log_in.php) ------------------------------------------ */

.gate-front {
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 88, 38, 0.7) 0%, #000000 65%);
}
.gate-front .gate-card {
    background: #07140c;
    border-color: var(--rich);
    box-shadow: 0 0 60px var(--rich-glow);
}
.gate-logo {
    display: block;
    width: 150px;
    margin: -6px auto 10px;
}
.gate-logo img { display: block; width: 100%; height: auto; }
.gate-front .gate-title { color: #ffffff; }
.gate-front .btn-go {
    background: var(--rich);
    font-size: 20px;
    padding: 12px 16px;
}
.gate-front .btn-go:hover,
.gate-front .btn-go:focus-visible { background: var(--rich-lt); border-color: var(--rich-hi); }
.gate-front a { color: var(--rich-hi); }

/* --- Footer ------------------------------------------------------------- */

.front-foot {
    padding: 26px 0 34px;
    border-top: 3px solid var(--rich);
    color: #8a948d;
    font-size: 14px;
    text-align: center;
}

/* --- Small screens ------------------------------------------------------ */

@media (max-width: 980px) {
    .top-price { display: none; }
}

@media (max-width: 860px) {
    .front-wrap { padding: 0 16px; }

    .top-inner { flex-wrap: wrap; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
    .brand { font-size: 24px; }
    .brand img { width: 40px; height: 40px; }
    .top-nav {
        width: 100%;
        margin-left: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }
    .nav-link { padding: 7px 8px; font-size: 15px; border-color: #1d3a27; }

    .hero { padding: 40px 0 50px; }
    .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .collage { height: 300px; }
    .price-badge .amount { font-size: 52px; }

    .feature { padding: 50px 0; }
    .feature-grid,
    .feature.img-right .feature-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .feature.img-right .feature-media { order: 0; }
    .shot-extras,
    .feature.img-right .shot-extras { right: 0; left: auto; width: 62%; }

    .price-card-body { padding: 24px 20px 26px; }
}