@font-face {
    font-family: "DM Sans";
    src: url("dm-sans.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
}

@font-face {
    font-family: "Space Grotesk";
    src: url("space-grotesk.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
}

:root {
    color-scheme: dark;
    --page: #100916;
    --panel: #1a1023;
    --text: #fbf7ff;
    --muted: #c1b2cd;
    --accent: #d9b0ff;
    --accent-strong: #efdaff;
    --stroke: #483256;
    --heading: "Space Grotesk", "DM Sans", system-ui, sans-serif;
    font-family: "DM Sans", system-ui, sans-serif;
    background: var(--page);
    color: var(--text);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--heading); line-height: 1.02; }
[id] { scroll-margin-top: 92px; }

:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 4px; }

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 20;
    transform: translateY(-180%);
    background: var(--accent-strong);
    color: var(--page);
    padding: 10px 16px;
    border-radius: 8px;
}

.skip-link:focus { transform: translateY(0); }
.container { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #100916ec;
    backdrop-filter: blur(18px);
    border-bottom: 1px solid #ffffff13;
}

.header-inner, .footer-inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand img { border-radius: 50%; object-fit: cover; }
.brand > span { font-family: var(--heading); font-weight: 700; letter-spacing: -0.03em; font-size: 16px; }
.brand > span span { color: var(--accent); }

.site-header nav { display: flex; align-items: center; gap: 28px; font-size: 14px; color: var(--muted); }
.site-header nav a:hover, .site-footer a:hover { color: var(--accent-strong); }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 13px 19px;
    border: 1px solid transparent;
    border-radius: 9px;
    min-height: 49px;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 700;
    text-align: center;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.button:hover { transform: translateY(-2px); }
.button-small { min-height: 42px; padding: 9px 13px; }
.button-primary { background: var(--accent); color: #23102f; }
.button-primary:hover { background: var(--accent-strong); }
.button-outline { border-color: #735488; background: #2d1b3866; }
.button-outline:hover { background: #3c234d; border-color: #b283d0; }

.out-arrow { display: inline-block; flex: 0 0 11px; position: relative; width: 11px; height: 11px; }
.out-arrow::before {
    content: "";
    position: absolute;
    top: 1px;
    right: 1px;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
}
.out-arrow::after {
    content: "";
    position: absolute;
    bottom: 1px;
    left: 1px;
    width: 10px;
    height: 1.5px;
    background: currentColor;
    transform: rotate(-45deg);
    transform-origin: left center;
}

.hero {
    overflow: hidden;
    position: relative;
    background: radial-gradient(ellipse at 80% 43%, #3b16535e, transparent 58%),
        linear-gradient(140deg, #1c1025, #100916 63%);
    border-bottom: 1px solid #ffffff10;
}

.hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.07fr) minmax(0, .93fr);
    min-height: 588px;
    align-items: center;
    padding-block: 56px 64px;
    gap: 30px;
}

.eyebrow {
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.status-dot {
    display: inline-block;
    margin-right: 7px;
    width: 7px;
    height: 7px;
    vertical-align: 1px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 13px #cc85ffb8;
}

.hero h1 {
    margin-top: 18px;
    font-size: clamp(45px, 6.45vw, 87px);
    font-weight: 700;
    letter-spacing: -.076em;
    line-height: .99;
}

.hero h1 em { font-style: normal; color: var(--accent); }
.intro { margin-top: 22px; max-width: 535px; color: var(--muted); font-size: clamp(16px, 1.5vw, 19px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 27px; }
.hero-detail { margin-top: 19px; color: #a695b5; font-size: 13px; }

.hero-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 463px;
    isolation: isolate;
}

.visual-glow {
    position: absolute;
    inset: 2% -6%;
    z-index: -1;
    background: radial-gradient(ellipse at 50% 53%, #a648e853, #5f257a18 52%, transparent 70%);
}

.phone-frame {
    width: clamp(190px, 18.5vw, 246px);
    padding: 8px;
    overflow: hidden;
    border-radius: 25px;
    background: #0e0814;
    border: 1px solid #ba88d2a1;
    box-shadow: 0 24px 58px #06020caa, 0 0 45px #ba68f82a;
    transform: rotate(-6deg);
}

.phone-frame img { width: 100%; height: auto; border-radius: 17px; }
.hero-visual-logo .phone-frame { transform: none; border-radius: 50%; }
.hero-visual-logo .phone-frame img { border-radius: 50%; }

.visual-label {
    position: absolute;
    right: 1%;
    bottom: 12%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 15px 10px 10px;
    border: 1px solid #b88ad055;
    border-radius: 12px;
    background: #271638f5;
    box-shadow: 0 12px 26px #08040d85;
}

.visual-label img { border-radius: 50%; }
.visual-label strong, .visual-label small { display: block; }
.visual-label strong { font-size: 12px; font-family: var(--heading); }
.visual-label small { font-size: 11px; color: var(--muted); }

.section { padding-block: 78px; }
.section-heading { max-width: 650px; margin: 0 0 32px; }
.section-heading h2, .integration-panel h2 {
    margin-top: 10px;
    font-size: clamp(32px, 4.25vw, 54px);
    letter-spacing: -.063em;
}

.section-heading p:last-child:not(.eyebrow) { color: var(--muted); margin-top: 12px; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.plan-card {
    display: flex;
    flex-direction: column;
    min-height: 345px;
    padding: 25px;
    border: 1px solid var(--stroke);
    border-radius: 16px;
    background: linear-gradient(160deg, #21152c, #17101f);
}

.plan-featured { border-color: #bb88da; background: linear-gradient(155deg, #3a2150, #20132b 76%); }
.plan-card h3 { font-size: 23px; letter-spacing: -.04em; }
.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px; margin: 19px 0 15px; }
.plan-price strong { font: 700 clamp(29px, 3.4vw, 43px)/1 var(--heading); letter-spacing: -.06em; }
.plan-price span { color: var(--muted); font-size: 13px; }
.features { list-style: none; padding: 0; margin: 0 0 17px; color: var(--muted); font-size: 14px; }
.features li { position: relative; padding-left: 19px; margin-bottom: 9px; }
.features li::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 3px;
    width: 5px;
    height: 9px;
    border-right: 1.5px solid var(--accent);
    border-bottom: 1.5px solid var(--accent);
    transform: rotate(43deg);
}
.plan-action { width: 100%; margin-top: auto; }

.credit-calculator {
    display: grid;
    grid-template-columns: auto 65px 1fr;
    align-items: center;
    gap: 8px;
    margin: 0 0 15px;
    padding: 9px;
    border: 1px solid #533c61;
    border-radius: 9px;
    background: #130c1b;
    font-size: 12px;
}

.credit-calculator label { color: var(--muted); }
.credit-calculator input {
    width: 100%;
    min-height: 34px;
    padding: 4px 6px;
    border: 1px solid #654775;
    border-radius: 6px;
    background: #271b31;
    color: var(--text);
}

.credit-calculator output { justify-self: end; color: var(--accent-strong); font-weight: 700; text-align: right; }

.app-section { background: #170f1e; border-block: 1px solid #ffffff10; }
.media-grid { display: grid; gap: 20px; }

.video-card, .screenshot-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--stroke);
    border-radius: 14px;
    background: #0f0a16;
}

.video-card { width: min(100%, 870px); }
.video-card video { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
figcaption { padding: 12px; font-size: 13px; color: var(--muted); }
.screenshot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 12px; }
.media-grid-photos .screenshot-grid { max-width: 720px; }
.screenshot-card a { display: grid; place-items: center; padding: 9px; }
.screenshot-card img { width: auto; height: clamp(230px, 28vw, 365px); object-fit: contain; border-radius: 7px; }
.screenshot-card figcaption { border-top: 1px solid #ffffff15; }

.integration-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr);
    align-items: center;
    gap: 24px;
    padding: clamp(25px, 4.3vw, 54px);
    border: 1px solid #6d4c82;
    border-radius: 17px;
    background: radial-gradient(ellipse at 92% 46%, #432354, transparent 65%), #211529;
}

.integration-panel h2 { max-width: 680px; font-size: clamp(31px, 4.1vw, 52px); }
.integration-panel p:not(.eyebrow) { margin-top: 15px; max-width: 550px; color: var(--muted); }
.integration-action { display: grid; justify-items: center; justify-self: end; gap: 10px; }
.integration-action > span { font-size: 12px; color: var(--muted); }
.site-footer { border-top: 1px solid #ffffff14; }
.footer-actions { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 14px; font-weight: 700; color: var(--accent); }

@media (max-width: 900px) {
    .site-header nav { gap: 15px; }
    .hero-inner { min-height: 535px; }
    .hero-visual { min-height: 410px; }
    .plan-card { padding: 19px; }
    .credit-calculator { grid-template-columns: auto minmax(46px, 60px); }
    .credit-calculator output { grid-column: span 2; justify-self: start; }
}

@media (max-width: 700px) {
    .container { width: calc(100% - 36px); }
    .header-inner { min-height: 65px; }
    .site-header nav { display: none; }
    .hero-inner { grid-template-columns: 1fr; gap: 20px; padding-block: 47px 32px; text-align: center; }
    .hero h1 { font-size: clamp(40px, 10vw, 66px); }
    .intro { margin-inline: auto; }
    .hero-actions { justify-content: center; }
    .hero-visual { min-height: 365px; }
    .phone-frame { width: 176px; }
    .visual-label { right: max(0px, calc(50% - 178px)); bottom: 9%; }
    .section { padding-block: 53px; }
    .section-heading { margin-bottom: 23px; }
    .plan-grid, .media-grid, .integration-panel { grid-template-columns: 1fr; }
    .screenshot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plan-card { min-height: 0; padding: 23px; }
    .credit-calculator { grid-template-columns: auto 68px 1fr; }
    .credit-calculator output { grid-column: auto; justify-self: end; }
    .integration-action { justify-self: start; justify-items: start; }
    .footer-inner { flex-wrap: wrap; padding-block: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .button { transition: none; }
    .button:hover { transform: none; }
}