:root {
    --bg:#090b14;
    --surface:#111522;
    --surface2:#171c2d;
    --text:#f5f7ff;
    --muted:#9aa5bd;
    --border:#252c40;
    --primary:#6d5dfc;
    --primary2:#21c8f6;
    --shadow:0 20px 70px rgba(0,0,0,.22);
}

html[data-theme="light"] {
    --bg:#f7f8fc;
    --surface:#ffffff;
    --surface2:#f0f3fa;
    --text:#10131c;
    --muted:#626d82;
    --border:#dde2ed;
    --shadow:0 20px 60px rgba(30,41,59,.09);
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

a {
    color:inherit;
    text-decoration:none;
}

button,
input {
    font:inherit;
}

.site-header {
    width:min(1180px,calc(100% - 30px));
    margin:0 auto;
    min-height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.brand {
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:900;
    font-size:19px;
}

.brand-mark {
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:11px;
    color:#fff;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary2)
        );
}

.site-header nav {
    display:flex;
    align-items:center;
    gap:16px;
    color:var(--muted);
    font-size:14px;
    font-weight:700;
}

.coffee-button {
    padding:10px 15px;
    border-radius:999px;
    color:#fff !important;
    background:
        linear-gradient(
            135deg,
            #ff5f5f,
            #ff923f
        );
    box-shadow:
        0 8px 22px
        rgba(255,95,95,.22);
}

.theme-toggle {
    width:38px;
    height:38px;
    border:1px solid var(--border);
    border-radius:11px;
    background:var(--surface);
    color:var(--text);
    cursor:pointer;
}

.page {
    width:min(1180px,calc(100% - 30px));
    margin:0 auto;
}

.hero {
    padding:
        78px
        0
        52px;
    text-align:center;
}

.hero.compact {
    max-width:700px;
    margin:0 auto;
}

.eyebrow {
    color:#7c72ff;
    font-size:12px;
    font-weight:900;
    letter-spacing:.16em;
}

.hero h1,
.tool-hero h1 {
    margin:
        13px
        auto
        18px;
    max-width:940px;
    font-size:
        clamp(
            42px,
            8vw,
            78px
        );
    line-height:.98;
    letter-spacing:-.055em;
}

.hero h1 span {
    background:
        linear-gradient(
            100deg,
            var(--primary),
            var(--primary2)
        );
    color:transparent;
    background-clip:text;
    -webkit-background-clip:text;
}

.hero > p,
.tool-hero > p {
    max-width:720px;
    margin:
        0
        auto
        30px;
    color:var(--muted);
    font-size:18px;
    line-height:1.7;
}

.hero-downloader,
.downloader-shell {
    max-width:880px;
    margin:34px auto 0;
    padding:22px;
    border:1px solid var(--border);
    border-radius:22px;
    background:var(--surface);
    box-shadow:var(--shadow);
    text-align:left;
}

.hero-downloader label,
.download-form label {
    display:block;
    margin-bottom:9px;
    font-size:13px;
    font-weight:800;
}

.input-row {
    display:flex;
    gap:10px;
}

.input-row input {
    min-width:0;
    flex:1;
    height:56px;
    padding:0 17px;
    border:1px solid var(--border);
    border-radius:14px;
    outline:none;
    background:var(--surface2);
    color:var(--text);
}

.input-row input:focus {
    border-color:#7165ff;
}

.primary-button {
    min-height:50px;
    padding:0 22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:14px;
    cursor:pointer;
    color:#fff;
    font-weight:900;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            #8b5cf6
        );
}

.platform-strip {
    margin-top:22px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
}

.platform-strip span {
    padding:7px 11px;
    border:1px solid var(--border);
    border-radius:999px;
    color:var(--muted);
    background:var(--surface);
    font-size:12px;
    font-weight:700;
}

.detect-result {
    margin-top:12px;
    padding:13px 15px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface2);
    color:var(--muted);
}

.tools-section {
    padding:
        40px
        0
        80px;
}

.section-heading {
    margin-bottom:25px;
}

.section-heading h2 {
    margin:
        7px
        0
        8px;
    font-size:
        clamp(
            30px,
            5vw,
            46px
        );
    letter-spacing:-.04em;
}

.section-heading p {
    color:var(--muted);
}

.tool-grid {
    display:grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );
    gap:14px;
}

.tool-card {
    min-height:205px;
    padding:22px;
    display:flex;
    flex-direction:column;
    border:1px solid var(--border);
    border-radius:18px;
    background:var(--surface);
    transition:
        transform .18s ease,
        border-color .18s ease;
}

.tool-card:hover {
    transform:translateY(-3px);
    border-color:#6259e8;
}

.tool-category {
    color:#8076ff;
    font-size:11px;
    font-weight:900;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.tool-card h3 {
    margin:
        12px
        0
        8px;
}

.tool-card p {
    margin:0;
    color:var(--muted);
    line-height:1.55;
    font-size:14px;
}

.open-tool {
    margin-top:auto;
    padding-top:20px;
    font-weight:800;
    font-size:13px;
}

.tool-hero {
    padding:
        60px
        0
        15px;
    text-align:center;
}

.tool-hero h1 {
    font-size:
        clamp(
            39px,
            7vw,
            66px
        );
}

.build-message {
    margin-top:15px;
    padding:15px;
    display:flex;
    flex-direction:column;
    gap:5px;
    border-radius:13px;
    background:var(--surface2);
    color:var(--muted);
}

.build-message strong {
    color:var(--text);
}

.site-footer {
    width:min(1180px,calc(100% - 30px));
    margin:0 auto;
    padding:
        28px
        0
        40px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:13px;
}

.site-footer > div:first-child {
    display:flex;
    flex-direction:column;
    gap:5px;
}

.site-footer strong {
    color:var(--text);
}

@media (max-width:850px) {

    .tool-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

    .site-header nav > a:not(.coffee-button) {
        display:none;
    }
}

@media (max-width:600px) {

    .site-header {
        min-height:70px;
    }

    .brand {
        font-size:16px;
    }

    .brand-mark {
        width:32px;
        height:32px;
    }

    .coffee-button {
        padding:8px 11px;
        font-size:12px;
    }

    .hero {
        padding-top:48px;
    }

    .hero h1 {
        font-size:46px;
    }

    .hero > p,
    .tool-hero > p {
        font-size:16px;
    }

    .hero-downloader,
    .downloader-shell {
        padding:15px;
    }

    .input-row {
        flex-direction:column;
    }

    .input-row input,
    .primary-button {
        width:100%;
    }

    .tool-grid {
        grid-template-columns:1fr;
    }

    .site-footer {
        flex-direction:column;
    }
}

/* ================================================
   PHASE 3A — MEDIA RESOLVER
   ================================================ */

.resolver-result {
    margin-top:14px;
}

.resolver-loading {
    padding:4px 2px;
    font-weight:700;
    color:var(--muted);
}

.resolver-error {
    display:block;
    padding:14px 16px;
    border:1px solid rgba(239,68,68,.3);
    border-radius:12px;
    background:rgba(239,68,68,.08);
    color:#ef6b73;
    font-weight:700;
}

.resolver-card {
    display:flex;
    flex-direction:column;
    gap:14px;
}

.resolver-card p {
    margin:0;
    color:var(--muted);
    line-height:1.6;
}

.resolver-top {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:9px;
}

.resolver-badge {
    padding:6px 9px;
    border-radius:999px;
    background:rgba(109,93,252,.14);
    color:#8a80ff;
    font-size:11px;
    font-weight:900;
    letter-spacing:.07em;
}

.media-facts {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.media-facts span {
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface);
    color:var(--muted);
    font-size:12px;
}

.media-facts b {
    color:var(--text);
}

.resolver-action {
    align-self:flex-start;
    padding:11px 16px;
    border-radius:12px;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            #8b5cf6
        );
    color:#fff;
    font-weight:900;
    font-size:13px;
}

.media-preview {
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:15px;
    background:var(--surface2);
}

.image-preview {
    max-width:420px;
}

.image-preview img {
    display:block;
    width:100%;
    max-height:360px;
    object-fit:contain;
}

.resolve-button:disabled,
#detectButton:disabled {
    opacity:.65;
    cursor:wait;
}

@media (max-width:600px) {

    .resolver-action {
        width:100%;
        justify-content:center;
        text-align:center;
    }

    .media-facts {
        flex-direction:column;
    }

    .media-facts span {
        width:100%;
    }
}

/* ================================================
   PHASE 3B — INSTAGRAM MEDIA RESULTS
   ================================================ */

.active-engine {
    border:
        1px solid
        rgba(34,197,94,.25);

    background:
        rgba(34,197,94,.07);
}

.instagram-result h3 {
    margin:0;
    line-height:1.4;
    font-size:17px;
}

.ig-media-grid {
    display:grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );
    gap:13px;
}

.ig-media-card {
    min-width:0;
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:11px;
    border:
        1px solid
        var(--border);
    border-radius:16px;
    background:
        var(--surface2);
}

.ig-preview-wrap {
    width:100%;
    overflow:hidden;
    display:grid;
    place-items:center;
    aspect-ratio:9 / 12;
    border-radius:12px;
    background:#05060b;
}

.ig-media-preview {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

.ig-media-info {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
}

.ig-media-info strong {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
}

.ig-media-card .resolver-action {
    width:100%;
    text-align:center;
    justify-content:center;
}

@media (max-width:650px) {

    .ig-media-grid {
        grid-template-columns:1fr;
    }

    .ig-preview-wrap {
        max-height:520px;
    }
}

/* Phase 3C — shared platform result styling */

.platform-result h3 {
    margin:0;
    line-height:1.4;
    font-size:17px;
}


/* ==========================================================
   IFS_LAUNCH_UI_V1
   ========================================================== */

:focus-visible {
    outline:
        3px solid
        rgba(109,93,252,.45);
    outline-offset:3px;
}

.primary-button,
.resolver-action,
.tool-card,
.coffee-button,
.site-header a,
.footer-links a {
    transition:
        transform .18s ease,
        opacity .18s ease,
        border-color .18s ease,
        background-color .18s ease,
        color .18s ease;
}

.primary-button:hover,
.resolver-action:hover {
    transform:
        translateY(-1px);
}

.site-header nav a:hover,
.footer-links a:hover {
    color:
        var(--text);
}

.launch-footer {
    align-items:
        flex-start;
}

.footer-brand {
    max-width:
        320px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.footer-links {
    max-width:
        470px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:
        10px
        16px;
    line-height:1.5;
}

.footer-links a {
    color:
        var(--muted);
    font-weight:700;
}

.footer-copy {
    white-space:
        nowrap;
}


/* Static / legal pages */

.static-page {
    padding-bottom:
        70px;
}

.static-hero {
    max-width:
        850px;
    margin:
        0
        auto;
    padding:
        70px
        0
        30px;
    text-align:
        center;
}

.static-hero h1 {
    margin:
        13px
        auto
        18px;

    font-size:
        clamp(
            40px,
            7vw,
            68px
        );

    line-height:1;
    letter-spacing:
        -.05em;
}

.static-hero p {
    max-width:
        720px;
    margin:
        0
        auto;

    color:
        var(--muted);

    font-size:
        17px;

    line-height:
        1.7;
}

.static-card {
    max-width:
        850px;

    margin:
        20px
        auto
        0;

    padding:
        clamp(
            22px,
            5vw,
            46px
        );

    border:
        1px solid
        var(--border);

    border-radius:
        22px;

    background:
        var(--surface);

    box-shadow:
        var(--shadow);
}

.static-card h2 {
    margin:
        34px
        0
        10px;

    font-size:
        clamp(
            22px,
            4vw,
            30px
        );

    letter-spacing:
        -.025em;
}

.static-card h2:first-child {
    margin-top:0;
}

.static-card p,
.static-card li {
    color:
        var(--muted);

    font-size:
        15px;

    line-height:
        1.8;
}

.static-card a {
    color:
        #8177ff;

    font-weight:
        800;
}

.static-card ul {
    padding-left:
        22px;
}


/* Accessibility */

.tool-card:focus-visible {
    border-color:
        #6259e8;
}


@media (max-width:850px) {

    .launch-footer {
        flex-direction:
            column;
    }

    .footer-links {
        justify-content:
            flex-start;
    }

    .footer-copy {
        white-space:
            normal;
    }
}


@media (max-width:600px) {

    .site-header {
        width:
            min(
                calc(100% - 22px),
                1180px
            );
    }

    .page {
        width:
            min(
                calc(100% - 22px),
                1180px
            );
    }

    .site-header nav {
        gap:
            8px;
    }

    .coffee-button {
        max-width:
            142px;

        overflow:
            hidden;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;
    }

    .tool-hero {
        padding-top:
            42px;
    }

    .tool-hero h1 {
        font-size:
            clamp(
                36px,
                12vw,
                52px
            );
    }

    .hero h1 {
        font-size:
            clamp(
                42px,
                13vw,
                56px
            );
    }

    .static-hero {
        padding-top:
            45px;
    }

    .static-card {
        border-radius:
            18px;
    }

    .launch-footer {
        width:
            min(
                calc(100% - 22px),
                1180px
            );
    }
}


/* ==========================================================
   IFS_TOOL_SEO_CONTENT_V1
   ========================================================== */

.tool-seo-content {
    max-width:920px;
    margin:
        56px
        auto
        80px;
}

.tool-content-main,
.tool-faq {
    padding:
        clamp(
            22px,
            4vw,
            36px
        );

    border:
        1px solid
        var(--border);

    border-radius:
        20px;

    background:
        var(--surface);
}

.tool-faq {
    margin-top:
        18px;
}

.tool-seo-content h2 {
    margin:
        9px
        0
        13px;

    font-size:
        clamp(
            27px,
            4vw,
            38px
        );

    letter-spacing:
        -.035em;
}

.tool-content-intro {
    margin:
        0
        0
        24px;

    color:
        var(--muted);

    font-size:
        16px;

    line-height:
        1.75;
}

.tool-steps {
    margin:
        0;

    padding:
        0;

    list-style:
        none;

    counter-reset:
        ifs-step;

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        12px;
}

.tool-steps li {
    position:
        relative;

    min-height:
        142px;

    padding:
        48px
        17px
        17px;

    border:
        1px solid
        var(--border);

    border-radius:
        15px;

    background:
        var(--surface2);

    color:
        var(--muted);

    line-height:
        1.6;

    counter-increment:
        ifs-step;
}

.tool-steps li::before {
    content:
        counter(
            ifs-step
        );

    position:
        absolute;

    top:
        14px;

    left:
        15px;

    width:
        25px;

    height:
        25px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        999px;

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #8b5cf6
        );

    font-size:
        12px;

    font-weight:
        900;
}

.tool-notes {
    margin-top:
        24px;

    padding:
        20px;

    border-radius:
        15px;

    background:
        var(--surface2);
}

.tool-notes h3 {
    margin:
        0
        0
        10px;

    font-size:
        17px;
}

.tool-notes ul {
    margin:
        0;

    padding-left:
        20px;

    color:
        var(--muted);

    line-height:
        1.7;
}

.faq-list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;
}

.faq-item {
    overflow:
        hidden;

    border:
        1px solid
        var(--border);

    border-radius:
        13px;

    background:
        var(--surface2);
}

.faq-item summary {
    position:
        relative;

    padding:
        16px
        48px
        16px
        17px;

    cursor:
        pointer;

    color:
        var(--text);

    font-weight:
        800;

    line-height:
        1.45;

    list-style:
        none;
}

.faq-item summary::-webkit-details-marker {
    display:
        none;
}

.faq-item summary::after {
    content:
        '+';

    position:
        absolute;

    right:
        18px;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        #8177ff;

    font-size:
        22px;

    font-weight:
        700;
}

.faq-item[open] summary::after {
    content:
        '−';
}

.faq-item p {
    margin:
        0;

    padding:
        0
        17px
        17px;

    color:
        var(--muted);

    line-height:
        1.7;
}


@media (max-width:720px) {

    .tool-seo-content {
        margin-top:
            38px;
    }

    .tool-steps {
        grid-template-columns:
            1fr;
    }

    .tool-steps li {
        min-height:
            0;
    }
}


/* ==========================================================
   IFS_AD_LAYOUT_V1
   Ads are disabled in SiteInfo.php until provider activation.
   ========================================================== */

.footer-email {
    margin-top:4px;
    color:#8177ff;
    font-weight:700;
    word-break:break-word;
}

.ad-slot {
    width:100%;
    max-width:920px;
    min-height:120px;
    margin:
        34px
        auto;
    padding:12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:
        1px solid
        var(--border);
    border-radius:16px;
    background:
        var(--surface);
    overflow:hidden;
    text-align:center;
}

.ad-label {
    color:
        var(--muted);
    font-size:10px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.ad-provider-mount {
    width:100%;
    min-height:90px;
    display:flex;
    align-items:center;
    justify-content:center;
}

/*
 * Keep advertising visually separated from download/result
 * controls so an advertisement cannot look like a download
 * action.
 */

.ad-slot-tool-primary {
    margin-top:38px;
    margin-bottom:46px;
}

.ad-slot-tool-secondary {
    margin-top:30px;
    margin-bottom:70px;
}

.ad-slot-home {
    margin-top:10px;
    margin-bottom:42px;
}

@media (max-width:600px) {

    .ad-slot {
        min-height:100px;
        margin-left:auto;
        margin-right:auto;
        border-radius:14px;
    }

    .ad-provider-mount {
        min-height:70px;
    }
}