:root {
    --main_color: #1d7b47;
    --ink: #202831;
    --muted: #45494e;
    --blue: #007aff;
    --line: #e6e8eb;
}
* {
    box-sizing: border-box
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 35px
}
a {
    color: inherit;
    text-decoration: none
}



button {
    font: inherit
}
a:hover {
    text-decoration: underline
}
a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 3px solid #007aff;
    outline-offset: 5px
}












.identity {
    display: flex;
    gap: 14px;
    align-items: center
}
.identity img {
    border-radius: 12px
}
.identity b {
    display: block;
    font-size: 18px
}
.identity small {
    display: block;
    font-size: 11px;
    color: #9a9a9a
}

.hero {
    text-align: center;
    padding-top: 84px
}
.eyebrow {
    font-size: 15px;
    letter-spacing: 3px;
    font-weight: 700;
    margin: 0 0 24px;
    color: var(--main_color);
}
.label,
p.label {
    color: var(--main_color);
}
small {
    font-size: 13px;
    line-height: 1.1;
    color: #444;
    display: inline-block;;
}



h1 {
    font-size: clamp(42px, 5.8vw, 72px);
    line-height: 1.35;
    letter-spacing: -2px;
    margin: 0 0 25px;
    font-weight: 750
}
h2 {
    font-size: clamp(29px, 3.5vw, 43px);
    letter-spacing: -1px;
    line-height: 1.5;
    margin: 0 0 24px
}
h3 {
    font-size: 21px;
    line-height: 1.5;
    margin: 20px 0 13px
}
p {
    margin: 0 0 20px
}
.lead {
    font-size: 19px;
    line-height: 2;
    color: var(--muted)
}
.actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin: 32px 0 18px
}
.button {
    display: inline-flex;
    background: var(--blue);
    color: white;
    padding: 13px 27px;
    border-radius: 30px;
    font-size: 14px;
    gap: 24px
}
.button:hover {
    background: #0067d8;
    text-decoration: none
}
.textlink {
    font-size: 13px;
    color: var(--blue);
    text-decoration: underline
}
.compat {
    font-size: 11px;
    color: #8d9299
}
.hero-stage {
    margin-top: 52px;
    padding: 34px 34px 12px;
    background: #f5f5f7;
    border-radius: 26px
}
.app-window {
    border-radius: 11px;
    background: #292928;
    box-shadow: 0 12px 22px #0005;
    text-align: left;
    color: #d4d4d4;
    overflow: hidden
}
.titlebar {
    height: 34px;
    background: #353534;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    position: relative
}
.titlebar i {
    height: 9px;
    width: 9px;
    border-radius: 50%;
    background: #ff6057
}
.titlebar i:nth-child(2) {
    background: #ffbd2e
}
.titlebar i:nth-child(3) {
    background: #28c840
}
.titlebar>span {
    position: absolute;
    left: 45%;
    font-size: 10px
}
.workspace {
    padding: 28px 23px;
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 35px
}
.landscape {
    position: relative;
    overflow: hidden;
    background: linear-gradient(#71b5c9, #e4d2b4 64%, #5d969f);
    width: 100%;
    height: 100%;
    isolation: isolate
}
.sun {
    position: absolute;
    width: 15%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff1cb;
    top: 15%;
    left: 68%
}
.mountain {
    position: absolute;
    inset: 20% -20% 0;
    clip-path: polygon(0 80%, 30% 0, 54% 57%, 72% 17%, 100% 80%, 100% 100%, 0 100%);
    background: #557a80
}
.mountain.front {
    inset: 38% -15% -10%;
    background: #254d58;
    transform: scaleX(-1)
}
.water {
    position: absolute;
    inset: 73% 0 0;
    background: repeating-linear-gradient(174deg, #639b9f 0 5px, #9bb8ac 7px, #548d97 9px)
}
.video>.landscape {
    aspect-ratio: 16/10;
    border-radius: 10px
}
.timeline {
    font-size: 7px;
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 17px 0
}
.timeline>div {
    height: 3px;
    background: linear-gradient(to right, #0787ff 35%, #666 35%);
    flex: 1
}
.playback {
    text-align: center;
    font-size: 12px
}
.playback span {
    float: right;
    background: #555;
    border-radius: 5px;
    padding: 2px 8px;
    font-size: 8px
}
.crop {
    width: 65%;
    aspect-ratio: 1;
    margin: 0 auto 15px;
    background: #111;
    padding: 13px;
    border-radius: 5px
}
.crop .landscape {
    border-radius: 20px
}
.settings {
    font-size: 9px;
    line-height: 2.6;
    color: #b0b0b0;
    text-align: center
}
.settings span {
    background: #555;
    padding: 3px 10px;
    border-radius: 3px
}
.appbuttons {
    display: flex;
    gap: 12px;
    padding: 0 23px 20px
}
.appbuttons span {
    flex: 1;
    text-align: center;
    background: #555;
    padding: 5px;
    font-size: 9px;
    border-radius: 5px
}
.caption {
    font-size: 10px;
    color: #92969d;
    margin: 18px 0 0
}
.section {
    padding-top: 112px;
    padding-bottom: 108px
}
.intro {
    color: var(--muted);
    font-size: 17px
}
.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    margin-top: 48px
}
.number {
    font-size: 0.8rem;
    letter-spacing: 2px;
    color: var(--main_color);
    font-weight: 650
}
.features p,
.split p,
.format p {
}
.mini {
    height: 155px;
    border-radius: 15px;
    background: #f5f6f8;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    margin-top: 18px;
    font-size: 25px;
    color: #7d8c98
}
.mini strong {
    font-size: 68px;
    font-weight: 300;
    color: #5d98aa
}
.mini-icon {
    width: 85px;
    border-radius: 20px
}
.edit span {
    font-size: 36px;
    color: #688fa8
}
.soft {
    background: #f7f8fa
}
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center
}
.split .subtle,
.format .subtle {
    font-size: 0.8rem;
    color: #5b5f64;
}
.finder-demo {
    text-align: center;
    background: white;
    border: 1px solid #e3e6eb;
    box-shadow: 0 15px 45px #21334909;
    border-radius: 16px;
    padding: 0 25px 25px
}
.demo-top {
    border-bottom: 1px solid var(--line);
    font-size: 10px;
    color: #c7cacf;
    padding: 10px;
    text-align: left
}
.demo-top span {
    margin-left: 60px;
    color: #777
}
.style-options {
    display: inline-flex;
    background: #eceef2;
    padding: 3px;
    border-radius: 8px;
    margin: 26px 0
}
.style-options button {
    background: none;
    border: 0;
    border-radius: 6px;
    padding: 4px 22px;
    font-size: 12px;
    cursor: pointer;
    color: #636a73
}
.style-options .selected {
    background: white;
    box-shadow: 0 1px 5px #0002;
    color: #222
}
.example-icon {
    width: 155px;
    height: 155px;
    margin: 12px auto 28px;
    transition: .3s
}
.example-icon>.landscape {
    border-radius: 27px;
    box-shadow: 0 9px 20px #173c592b
}
.example-icon.folder {
    position: relative;
    width: 185px;
    height: 135px;
    padding-top: 16px;
    background: #86c8e5;
    border-radius: 10px
}
.example-icon.folder:before {
    content: "";
    position: absolute;
    left: 0;
    top: -6px;
    width: 75px;
    height: 25px;
    background: #86c8e5;
    border-radius: 9px
}
.example-icon.folder>.landscape {
    border-radius: 8px
}
.finder-demo p {
    font-size: 12px;
    margin-bottom: 4px
}
.finder-demo small,
.trim-demo small {
    font-size: 10px;
    color: #9198a1
}
.trim-demo {
    padding: 40px 25px;
    background: #f4f5f7;
    border-radius: 18px;
    text-align: center
}
.trim-demo>p {
    font-size: 10px;
    letter-spacing: 2px;
    color: #697481
}
.film {
    display: flex;
    height: 95px;
    position: relative;
    gap: 3px
}
.film>span {
    flex: 1;
    background: linear-gradient(150deg, #c6dce0 15%, #568d99 16% 50%, #255d6c 51% 80%, #9cbfc1 81%)
}
.film>span:nth-child(2n) {
    filter: brightness(.85)
}
.cut {
    position: absolute;
    inset: 0 33%;
    border: 3px solid #ffae35;
    color: #fff;
    background: #dc771a65;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px
}
.time-label {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: #85909b;
    margin: 10px 0 28px
}
.trim-output {
    background: white;
    border: 1px solid #e5e8eb;
    border-radius: 7px;
    padding: 13px;
    font-size: 11px;
    color: #54616e;
    margin-bottom: 18px
}
.format {
    background: #f6f8fa;
    border-radius: 22px;
    padding-top: 50px;
    padding-bottom: 35px;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: center
}
.format h2 {
    font-size: 29px
}
.formats {
    display: flex;
    gap: 12px
}
.formats span {
    background: white;
    border: 1px solid #e2e7ec;
    border-radius: 10px;
    padding: 25px 13px;
    font-weight: 600;
    font-size: 13px;
    box-shadow: 0 8px 20px #00000004
}
.faq {
}
.faq h2 {
    margin-bottom: 38px
}








footer {
    padding-top: 40px;
    padding-bottom: 35px;
    text-align: center;
    font-size: 11px;
    color: #727a83
}
footer>div {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 22px 0
}
footer small {
    font-size: 10px
}





@media(min-width:1500px) {
    .hero {
        padding-top: 100px
    }
}
@media(max-width:720px) {
    header {
        height: 57px;
        padding: 0 20px
    }
    .brand {
        font-size: 23px
    }
    nav {
        gap: 16px;
        font-size: 12px
    }

    .appbar {
        padding-top: 20px;
        padding-bottom: 20px;
        display: flex;;
        justify-content: space-between;
    }
    .appbar nav {
        gap: 16px
    }
    .identity img {
        width: 39px;
        height: 39px
    }
    .identity b {
        font-size: 15px
    }
    .hero {
        padding-top: 65px
    }
    .eyebrow {
        font-size: 11px;
        letter-spacing: 2px
    }
    .lead {
        font-size: 16px
    }
    .hero-stage {
        padding: 20px 13px 10px;
        border-radius: 20px
    }
    .workspace {
        gap: 15px;
        padding: 18px 12px
    }
    .settings {
        font-size: 6px
    }
    .appbuttons {
        gap: 5px;
        padding: 0 12px 14px
    }
    .appbuttons span {
        font-size: 6px
    }
    .titlebar {
        height: 24px
    }
    .titlebar i {
        width: 7px;
        height: 7px
    }
    .crop {
        width: 75%;
        padding: 7px
    }
    .playback {
        font-size: 8px
    }
    .playback span {
        font-size: 5px
    }
    .timeline {
        font-size: 5px
    }
    .caption {
        font-size: 8px
    }
    .section {
        padding-top: 75px;
        padding-bottom: 72px
    }
    .features {
        grid-template-columns: 1fr;
        gap: 36px
    }
    .mini {
        height: 150px
    }
    .features h3 {
        margin-top: 18px
    }
    .features p {
        font-size: 14px
    }
    .split {
        grid-template-columns: 1fr;
        gap: 35px
    }
    .split>.trim-demo {
        order: 2
    }
    .intro {
        font-size: 15px
    }
    .format {
        margin: 0 20px;
        padding: 35px 24px;
        display: block
    }
    .format h2 {
        font-size: 25px
    }
    .formats {
        margin-top: 28px
    }
    .formats span {
        flex: 1;
        text-align: center;
        padding: 16px
    }
    .actions {
        gap: 22px
    }
    .button {
        padding: 12px 23px
    }
    .cta {
        padding: 65px 0
    }
    footer>div {
        flex-direction: column;
        gap: 10px
    }
    .appbar nav a:first-child {
        display: none
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }
    * {
        transition: none !important
    }
}