@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&family=Barlow+Condensed:wght@500&family=Barlow+Semi+Condensed&family=Lexend+Deca:wght@100..900&family=Cinzel:wght@400..900&family=Sumana:wght@400;700&family=Suranna&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Alice&family=Arbutus+Slab&family=Lora:ital,wght@0,400..700;1,400..700&family=Platypi:ital,wght@0,300..800;1,300..800&family=Poly:ital@0;1&family=Sumana:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amethysta&family=Brawler:wght@400;700&family=Cambo&family=Headland+One&family=Idiqlat:wght@200;300;400&family=Lustria&family=Petrona:ital,wght@0,100..900;1,100..900&family=Quattrocento:wght@400;700&family=Taviraj:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


:root {
    --text: #e0e0e0;
    --a: #ffe4b9;
    --nav-a: #ffe5e6;
    --accent: #ffc46c;
    --shadow: 1px 4px 26px rgba(0, 0, 0, 0.3), 1px 1px 3px rgba(0, 0, 0, 0.3);
}

*{box-sizing: border-box;}
html {
    font-size: clamp(16px, 0.75vw + 1.6px, 20.8px);
    min-height: 100%;
    scroll-behavior: smooth;
    background: #111;
}
body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to right, #111 5%, #222 30%, #222 70%, #111 95%);
    background-image: url(../media/img/black_big3.jpg);
    background-size: contain;
    color: var(--text);
    font-family: "Afacad Flux", sans-serif;
    font-size: 1.25rem;
    line-height: 1.45;
}

.content {
    flex: 1 0 auto;
}

a {
    color: var(--a);
    text-decoration: none;
    transition: color .18s, border-color .18s, background .18s, transform .18s;
}
a:hover { color: #ffe08a; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 {
    color: white;
    letter-spacing: -0.02em;
    font-family: "Petrona", "Alice", "Arbutus Slab", serif;
    font-weight: 350;
}
h1 {
    font-size: 3.9rem;
    line-height: .88;
    margin-bottom: 1.375rem;
    max-width: 47.5rem;
}
h1 span { color: var(--accent); }
h2 span { color: var(--accent); }
h2 {
    font-size: 3.4rem;
    line-height: .96;
    margin-bottom: 1.125rem;
}
h3 {
    color: #fff;
    font-size: 1.08rem;
    margin-bottom: 0.4375rem;
}
p { color: #bbb; }

.wrap {
    width: min(87.5rem, calc(100% - 4.5rem));
    margin: 0 auto;
}
.site-header {
    height: 7.375rem;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background-color: #020202;
    border-bottom: 0;
    box-shadow: none;
}
.header-inner {
    min-height: 5.75rem;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
}
.brand {
    position:absolute;
    top: 2.5rem;
    color: #fff;
    font-family: "Petrona", "Alice", "Lustria", "Quattrocento", "Poly", "Arbutus Slab", serif;
    font-size: 5.6rem;
    font-weight: 500;
    line-height: .85;
    text-shadow: 0 3px 18px rgba(0,0,0,.7);
}
.brand img {
    width: 24.875rem;
 }

.top-nav {
    align-items: center;
    font-family: "Barlow Semi Condensed", sans-serif;
    margin-left: auto;
}
.top-nav a {
    color: var(--nav-a);
    padding: 0.5625rem 0.875rem;
    border: 1px solid transparent;
}
.top-nav a:hover {
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.04);
}
.top-nav .nav-buy {
    color: white;
    background-image: url(../media/img/red_bg.jpg);
    background-size: cover;
    border-color: #ffc2c2;
    border-radius: 4px;
    box-shadow: 0 4px 18px rgba(0,0,0,.35);
}

.hero {
    display: grid;
    grid-template-columns: minmax(26.25rem, 0.6fr) 1.1fr;
    gap: 3.125rem;
    align-items: center;
    padding-top: 2.625rem;
}
.leadtop { color: #ddd;
    font-weight: bold;
}
.lead {
    color: #ddd;
    font-size: 1.37rem;
    font-weight: bold;
    max-width: 40rem;
}
.hero-copy { max-width: 42.5rem; }
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    margin: 2rem 0 1.75rem;
}
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    border: 1px solid #444;
    font-weight: 700;
}
.button.primary {
    color: white;
    background-image: url(../media/img/red_bg.jpg);
    background-size: cover;
    border-color: #ffc2c2;
    box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
.button.primary:hover {
    color: white;
    filter: brightness(1.05);
}
.button.quiet { 
    color: var(--a);
    background-image: url(../media/img/grey_bg.jpg);
    border-color: rgba(238,160,72,.35);
}
.button.wide {
    width: 100%;
    margin-top: 1.5rem;
}
.platforms {
    display: flex;
    gap: 1.125rem;
    list-style: none;
    padding: 0;
    margin: 0;
    color: #888;
    font-size: .95rem;
}
.platforms li {
    border: 1px solid #222;
    background: rgba(0,0,0,.18);
    padding: 0.375rem 0.625rem;
    border-radius: 3px;
}
.platforms .ready {
    color: #fff;
    border-color: rgba(238,160,72,.45);
}

.product-shot { perspective: 1400px; }
.angled-image {
    display: block;
    width: 100%;
    max-height: 38.125rem;
    object-fit: cover;
    border: 1px solid #3b3b3b;
    border-radius: 8px;
    background: #111;
    box-shadow: 18px 28px 40px rgba(0,0,0,.44);
    transform: rotateY(-5deg) rotateX(3deg);
}

.trust {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: 1px solid #222;
    border-radius: 8px;
    background: rgba(0,0,0,.22);
    box-shadow: var(--shadow);
    margin:0;
    width:100%;
}
.trust div {
    padding: 0.9375rem 1.25rem;
    border-right: 1px solid #222;
}
.trust div:last-child { border-right: 0; }
.trust b {
    display: block;
    color: #fff;
    font-size: 1.18rem;
}
.trust span {
    display: block;
    margin-top: 0.3125rem;
    color: #aaa;
    font-size: .94rem;
}

.section {
    padding: 4.5rem 0; }
.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.875rem;
}
.section-heading.compact {
    display: block;
    max-width: 45rem;
}
/*  */
.showoff-section { padding: 2.5rem 0 3.5rem; }
.showoff {
    display: grid;
    grid-template-columns: 21.25rem 1fr;
    gap: 2.125rem;
    align-items: start;
    padding: 1rem 0;
    border-top: 1px solid #1e1e1e;
}
.showoff:first-child {
    border-top: 0;
    padding-top: 0.375rem;
}
.showoff.flip {
    grid-template-columns: 1fr 21.25rem;
}
.showoff.flip .showoff-copy {
    order: 2;
}
.showoff.wide {
    grid-template-columns: 1fr;
    gap: 0.375rem;
    /* a bit extra for copy text here  */
    padding-bottom: 2rem;
}
.showoff.narrow,
.showoff.compact {
    grid-template-columns: 1fr 1.7fr;
    margin: 0 auto;
}
.showoff.narrow { max-width: 77.25rem; }
.showoff.compact { max-width: 58.625rem; }

.showoff.fitted .showoff-clips { grid-template-columns: 1.78fr 1.28fr; } /* last bit for overlay ui */
.showoff.wide .showoff-copy {
    order: 2;
    max-width: 59.375rem;
    margin: 0 auto;
}
.showoff-copy h2 {
    font-size: 2rem;
    line-height: 1.02;
    margin-bottom: 0.625rem;
}
.showoff-copy p {
    font-size: .97rem;
    margin-bottom: 0.625rem;
}
.showoff-copy p:last-child {
    margin-bottom: 0;
}
.showoff-tag {
    display: block;
    color: var(--accent);
    font-family: "Barlow Condensed", sans-serif;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .82rem;
    margin-bottom: 0.25rem;
}
.showoff-limits {
    list-style: none;
    padding: 0;
    margin: 0 0 0.625rem;
    columns: 2;
    column-gap: 1.125rem;
    color: #a4a4a4;
    font-size: .88rem;
}
.showoff-limits li {
    padding-left: 0.75rem;
    position: relative;
    break-inside: avoid;
}
.showoff-limits li::before {
    content: "-";
    position: absolute;
    left: 0;
    color: var(--accent);
}

.showoff-clips {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem;
}
.showoff-clip {
    margin: 0 
}
.showoff-clip:only-child { grid-column: 1 / -1; }
.clip-frame {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid #242424;
    border-radius: 6px;
    box-shadow: var(--shadow);
    object-fit: cover;
}
.clip-frame.letterbox { aspect-ratio: 15 / 7; }
.clip-frame.panorama { aspect-ratio: 245 / 81; }
.clip-frame.sixteen-ten { aspect-ratio: 8 / 5; }
.clip-frame.banner { aspect-ratio: 676 / 255; }
.clip-frame.squarish { aspect-ratio: 998 / 779; } 
.clip-caption {
    margin-top: 0.4375rem;
    margin-bottom: 0;
    color: #979797;
    font-size: .87rem;
    line-height: 1.3;
}

.showoff-rest {
    margin-top: 2.5rem;
    padding-top: 1.625rem;
    border-top: 1px solid #1e1e1e;
}
.showoff-rest p { max-width: 43.75rem; }
.showoff-rest ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 1.125rem 0 0;
}
.showoff-rest li {
    padding: 0.4375rem 0.6875rem;
    border: 1px solid #222;
    background: rgba(0,0,0,.24);
    border-radius: 4px;
    font-size: .92rem;
    color: #b4b4b4;
}

.about {
    display: grid;
    grid-template-columns: 20.625rem 1fr;
    gap: 2.625rem;
    align-items: start;
}
.about-photo {
    display: block;
    width: 100%;
    object-fit: cover;
    background: #000;
    border: 1px solid #242424;
    border-radius: 0px;
    box-shadow: var(--shadow);
}
.about-copy p {
    max-width: 48.75rem;
    font-size: .98rem;
    margin-bottom: 0.6875rem;
}
.about-roles {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
    max-width: 48.75rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 1.875rem;
}
.about-roles li {
    padding: 0.5625rem 0;
    border-top: 1px solid #1c1c1c;
    font-size: .95rem;
    color: #b4b4b4;
}
.about-roles li:first-child, .about-roles li:nth-child(2) { border-top: 0; }
.about-roles b {
    display: block;
    color: #fff;

}
.about-roles span {
    color: #949494;
    font-style: italic;
    font-size: .92rem;
}

/* GALLERY */
.gallery-wall {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}
.wall-row {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}
.gallery-item {
    flex-basis: 0;
    min-width: 0;
}
.gallery-item a { display: block; }
.gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #242424;
    border-radius: 6px;
    box-shadow: var(--shadow);
    background: #111;
}
.gallery-credit {
    margin: 0.5rem 0 0;
    color: #979797;
    font-size: .9rem;
}

/* mobile lightbox title hack*/
.glightbox-clean .gslide-description { background: #0b0b0b; }
.glightbox-clean .gdesc-inner { padding: 0.75rem 1rem; }
.glightbox-clean .gslide-title {
    color: #fff;
    font-family: "Petrona", "Alice", serif;
    font-size: 1.15rem;
    margin-bottom: 0;
}

.gallery-section { background: rgba(0,0,0,.4); } 
.gallery-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
    gap: 0.75rem;
}
.gallery-tile {
    display: block;
    min-height: 11.5625rem;
    margin: 0;
    border: 1px solid #222;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow);
    background: #111;
}
.gallery-tile img {
    display: block;
    width: 100%;
    height: 11.5625rem;
    object-fit: cover;
    filter: brightness(.9);
    transition: transform .25s ease, filter .25s ease;
}
.gallery-tile:hover img {
    transform: scale(1.025);
    filter: brightness(1.04);
}
.gallery-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,.72), transparent 60%);
}
.tile-caption  {
    position: absolute;
    left: 0.75rem;
    bottom: 0.625rem;
    z-index: 2;
    color: white;
    font-size: .85rem;
    text-shadow: 0 2px 6px black;
}

.roadmap-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.875rem;
    margin-top: 1.875rem;
}
.roadmap-list article {
    border: 1px solid #222;
    border-radius: 6px;
    padding: 1.375rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .28), rgba(0, 0, 0, .12)) ;
}
.roadmap-list span {
    color: var(--accent);
    font-family: "Barlow Condensed", sans-serif;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.buy-section {
    display: grid;
    grid-template-columns: 1fr 26.25rem;
    gap: 3.125rem;
    align-items: center;
}
.buy-copy strong{}
.buy-copy ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}
.buy-copy li {
    padding: 0.5rem 0.625rem;
    border: 1px solid #222;
    background: rgba(0,0,0,.24);
    border-radius: 4px;
    font-size: .92rem;
}
.price-card {
    padding: 2.125rem;
    border: 1px solid #555;
    border-radius: 8px;
    background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(0,0,0,.35));
    text-align: center;
    box-shadow: var(--shadow);
}
.price-card p {
    color: white;
    margin-bottom: 0.1875rem;
}
.price-card strong {
    font-weight: 400;
    display: block;
    color: white; 
    font-size: 4rem;
    line-height: 1;
    letter-spacing: -.06em;
}
.price-card span { color: #aaa; }
.trial-link {
    display: block;
    margin-top: 1rem;
}
.price-card .platforms {
    display: block;
    margin-top: 0.875rem;
    color: #8f8f8f;
    font-size: .84rem;
    line-height: 1.45;
}
.price-card a{
    text-decoration: underline;
}

.site-footer {
    border-top: 1px solid #111;
    background: rgba(0,0,0,.52);
    padding: 0.75rem 0 2rem;
    color: #999;
}
.footer-grid {
    display: grid;
    grid-template-columns: 20rem 1fr;
    gap: 1.75rem;
}
.footer-logo {
    display: block;
    width: 14.375rem;
    max-width: 100%;
    margin-bottom: 0.625rem;
}
.footer-grid a {
    display: block;
    color: var(--nav-a);
    margin-bottom: 0.1875rem;
}
.footer-grid a:hover { color: var(--accent); }

.footer-side .signup {
    margin-top: 1.5rem;
}
.footer-side .signup-row input { flex: 1 1 8rem; }
.signup label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: .96rem;
}
.signup-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    max-width: 34rem;
}
.signup-row input {
    flex: 1 1 14rem;
    padding: 0.4375rem 0.9375rem;
    border: 1px solid #333;
    border-radius: 4px;
    background: rgba(0,0,0,.35);
    color: var(--text);
    font-family: inherit;
    font-size: .92rem;
    line-height: 1.45;
}
.signup-row input:focus { border-color: rgba(238,160,72,.5); }
.signup-row .button {
    min-height: 0;
    padding: 0.4375rem 0.9375rem;
    font-family: "Barlow Semi Condensed",sans-serif;
    font-size: .92rem;
    line-height: 1.45;
    white-space: nowrap;
}
.signup-subject { display: none; }

.footer-pitch {
    margin: 0 0 0.625rem;
    font-size:.96rem;
    text-align: right;
}
.footer-pitch b {
    color: #fff;
}
.footer-links {
    width: 167px;
    margin-left: auto;
}
.footer-links .button {
    display: flex;
    width: 167px;
    margin-bottom: 0.4375rem;
}

.footer-top {
    grid-column: 1 / -1;
    margin-top: 1.5rem;
    text-align: center;
}
.footer-top a {
    display: inline-block;
    padding: 0.4375rem 0.9375rem;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    background: rgba(0,0,0,.3);
    color: var(--nav-a);
    font-size:.92rem;
}
.footer-links .button, .footer-grid a, .footer-top a {
    font-family: "Barlow Semi Condensed",sans-serif;
}
.footer-top a:hover {
    color: var(--accent);
    border-color: rgba(238,160,72,.35);
}

/* pages */
.buy-page-section { border-top: none; }

.about-discord {
    width: 100%;
    margin-top: 1.5rem;
    padding: 1.125rem 1.5rem;
    border: 1px solid #222;
    border-radius:8px;
    background: rgba(0,0,0,.22);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.about-discord .discord-link {
    float: left;
    margin: 0 1.375rem 0.25rem 0;
}
.about-discord img {
    display: block;
    width: 2.5rem;
    margin-left:25%;
}
.about-discord p {
    max-width: none;
    margin: 0 0 0.75rem;
    font-size: .94rem;
    color: #aaa;
}
.about-discord p:last-child {
    margin-bottom: 0;
}

.discord-link:hover img {
  filter: brightness(1.15) sepia(1) saturate(1.8) hue-rotate(345deg);
}



/* mobile..TODO: */

@media (max-width: 1080px) {
    .hero, .buy-section { grid-template-columns: 1fr; }
    .showoff, .showoff.flip, .showoff.narrow, .showoff.compact {
        grid-template-columns: 1fr;
        gap: 1.125rem;
    }
    .showoff.narrow, .showoff.compact { max-width: none; }
    .showoff.flip:not(.wide) .showoff-copy { order: 0; }
    /* stacked */
    .product-shot {
        order: -1;
        max-width: 51.25rem;
    }
    .trust, .roadmap-list { grid-template-columns: repeat(2, 1fr); }
    .gallery-row { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
    body{ font-size: 13.5pt;}
    .wrap { width: min(100% - 1.75rem, 87.5rem); }
    .trust { width: 100%; } 
    h1 { font-size: 2.6rem; }
    h2 { font-size: 2rem; }
    
    .site-header { height: auto; }
    .header-inner {
        min-height: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.875rem 0 1rem;
    }
    .brand {
        position: static;
        top: auto;
    }
    .brand img {
        display: block;
        width: 17rem;
        max-width: 100%;
    }
    .top-nav {
        margin-left: 0;
        text-align: right;
    }
    .top-nav a { padding: 0.375rem 0.5rem; }
    .hero {
        min-height: auto;
        gap: 1.25rem;
        padding: 1.5rem 0 2rem;
    }
    .hero-actions { margin: 1.25rem 0 0.25rem; }
    .angled-image {
        max-height: none;
        transform: none;
        box-shadow: 0 10px 26px rgba(0,0,0,.5);
    }
    .app-body {
        height: 20.625rem;
        grid-template-columns: 2.125rem 1fr 6.875rem;
    }
    .brush-strip { display: none; }
    .platforms, .buy-copy ul { flex-direction: column; }
    .trust, .roadmap-list, .gallery-row, .footer-grid { grid-template-columns: 1fr; }
    .wall-row { flex-direction: column; }
    .showoff-copy h2 { font-size: 1.7rem; }
    .showoff-limits { columns: 1; }
    .showoff-clips, .showoff.fitted .showoff-clips { grid-template-columns: 1fr; }
    
    .showoff.wide { gap: 1.125rem; }
    .showoff.wide .showoff-copy { order: 0; }
    
    .showoff-clips {
        margin-left:  -0.875rem;
        margin-right: -0.875rem;
    }
    .clip-frame {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
    .clip-caption { padding: 0 0.875rem; }

    .about { display: block; }
    .about-photo {
        float: left;
        width: 8.75rem;
        max-width: 40%;
        margin: 0.25rem 1rem 0.5rem 0;
    }
    .about-roles {
        grid-template-columns: 1fr;
        clear: left;
    }
    .about-roles li:nth-child(2) { border-top: 1px solid #1c1c1c; }
    .trust div {
        border-right: 0;
        border-bottom: 1px solid #222;
    }
    .trust div:last-child { border-bottom: 0; }
    .section-heading { display: block; }
    .price-card strong { font-size: 3rem; }
    .footer-links {
        order: -2;
        flex: 0 0 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0 0.75rem;
        width: auto;
        margin: 0;
    }
    .footer-pitch {
        order: -3;
        flex: 0 0 100%;
        text-align: center;
    }
    .signup-row .button { width: 100%; }
    .footer-links a { margin-bottom: 0; }
    .footer-links .button {
        order: 1;
        width: auto;
        min-height: 2.25rem;
        margin: 0;
        padding: 0.4375rem 0.875rem;
    }
    .footer-logo { display:none }

    .footer-side, .footer-main { display: contents; }
    .footer-grid {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0.625rem 1.5rem;
    }
    .footer-side .signup {
        order: -1;
        flex: 0 0 100%;
        margin-top: 0;
        text-align: center;
    }
    .footer-side .signup-row {
        margin: 0 auto;
    }
    .footer-side .signup-row input { flex: 1 1 14rem; }
    .footer-side p { margin-bottom: 0; }
    .footer-top {
        margin: 0;
    }
}