:root {

    --bg:#f4f5f7;
    --bg2:#ffffff;

    --text:#0a0b0e;
    --muted:#666b75;

    --glass:rgba(255,255,255,.68);
    --glass2:rgba(255,255,255,.48);

    --line:rgba(0,0,0,.09);

    --shadow:
        0 30px 90px rgba(0,0,0,.10);

    --accent:#111318;

    --canvas-opacity:.34;
}

html[data-theme="dark"] {

    --bg:#08090c;
    --bg2:#101216;

    --text:#f7f7f8;
    --muted:#8e949f;

    --glass:rgba(22,24,29,.66);
    --glass2:rgba(255,255,255,.055);

    --line:rgba(255,255,255,.09);

    --shadow:
        0 35px 100px rgba(0,0,0,.45);

    --accent:#ffffff;

    --canvas-opacity:.52;
}


* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {

    margin:0;

    background:
        radial-gradient(
            circle at 20% 10%,
            rgba(120,120,120,.08),
            transparent 30%
        ),
        var(--bg);

    color:var(--text);

    font-family:
        Inter,
        sans-serif;

    overflow-x:hidden;

    transition:
        background .5s ease,
        color .5s ease;
}


button,
input {
    font:inherit;
}


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


/* =========================================================
   THREE BACKGROUND
========================================================= */

#threeCanvas {

    position:fixed;

    inset:0;

    width:100%;
    height:100%;

    z-index:-10;

    opacity:var(--canvas-opacity);

    pointer-events:none;

    transition:
        opacity .5s ease;
}


.environment {

    position:fixed;

    inset:0;

    z-index:-9;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            var(--bg) 90%
        );

    opacity:.72;
}


/* =========================================================
   MAIN
========================================================= */

.page {

    width:100%;

    min-height:100vh;

    position:relative;
}


.wrapper {

    width:min(
        1480px,
        calc(100% - 36px)
    );

    margin:auto;
}


/* =========================================================
   NAV
========================================================= */

.nav {

    position:relative;

    margin-top:18px;

    min-height:82px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:15px 20px;

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

    border-radius:24px;

    background:
        var(--glass);

    backdrop-filter:
        blur(25px);

    -webkit-backdrop-filter:
        blur(25px);

    box-shadow:
        var(--shadow);

    z-index:20;
}


.brand {

    display:flex;

    align-items:center;

    gap:14px;
}


.brand-logo {

    width:52px;
    height:52px;

    border-radius:17px;

    object-fit:cover;

    box-shadow:
        0 12px 30px rgba(0,0,0,.20);
}


.brand-name {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:20px;

    font-weight:800;

    letter-spacing:-.05em;
}


.brand-small {

    font-size:9px;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:var(--muted);

    margin-top:2px;
}


.nav-actions {

    display:flex;

    align-items:center;

    gap:8px;
}


.icon-btn {

    width:48px;
    height:48px;

    border-radius:15px;

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

    background:
        var(--glass2);

    color:var(--text);

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.25s ease;
}


.icon-btn:hover {

    transform:
        translateY(-3px);

    background:
        var(--glass);
}


/* =========================================================
   HERO
========================================================= */

.hero {

    position:relative;

    min-height:
        calc(100vh - 120px);

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
        90px 0
        120px;

    overflow:hidden;
}


.hero-kicker {

    display:flex;

    align-items:center;

    gap:12px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:var(--muted);

    margin-bottom:26px;
}


.kicker-line {

    width:50px;

    height:1px;

    background:var(--text);

    opacity:.4;
}


.hero-title {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            64px,
            10.5vw,
            168px
        );

    line-height:.84;

    letter-spacing:
        -.075em;

    font-weight:800;

    max-width:
        1200px;

    margin:0;

    position:relative;

    z-index:2;
}


.hero-title span {

    display:block;

    color:transparent;

    -webkit-text-stroke:
        1.5px var(--text);

    opacity:.34;
}


.hero-description {

    max-width:650px;

    margin-top:42px;

    font-size:
        clamp(
            17px,
            1.8vw,
            25px
        );

    line-height:1.55;

    color:var(--muted);
}


.hero-actions {

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-top:40px;
}


.big-btn {

    min-height:58px;

    padding:
        0 26px;

    border-radius:17px;

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

    background:
        var(--glass);

    color:var(--text);

    font-size:14px;

    font-weight:700;

    cursor:pointer;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    transition:.3s ease;
}


.big-btn.primary {

    background:
        var(--text);

    color:
        var(--bg);

    border-color:
        var(--text);
}


.big-btn:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.18);
}


/* =========================================================
   3D HERO OBJECT
========================================================= */

.hero-3d {

    position:absolute;

    right:-70px;

    top:50%;

    transform:
        translateY(-50%);

    width:
        min(43vw,620px);

    height:
        min(43vw,620px);

    pointer-events:none;

    z-index:0;
}


.hero-orb {

    position:absolute;

    inset:15%;

    border-radius:50%;

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

    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(255,255,255,.25),
            rgba(255,255,255,.015) 55%,
            transparent 70%
        );

    box-shadow:
        inset 0 0 80px rgba(255,255,255,.04),
        0 40px 100px rgba(0,0,0,.18);

    backdrop-filter:
        blur(5px);
}


.hero-orb::before {

    content:"";

    position:absolute;

    inset:8%;

    border-radius:50%;

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

    transform:
        rotateX(65deg)
        rotateZ(20deg);
}


.hero-orb::after {

    content:"";

    position:absolute;

    inset:-10%;

    border-radius:50%;

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

    transform:
        rotateY(65deg)
        rotateZ(-25deg);

    opacity:.7;
}


/* =========================================================
   BIG SECTION
========================================================= */

.section {

    padding:
        130px 0;
}


.section-heading {

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:40px;

    margin-bottom:65px;
}


.section-number {

    font-family:
        "Space Grotesk";

    font-size:
        clamp(80px, 12vw, 190px);

    font-weight:800;

    line-height:.7;

    letter-spacing:-.08em;

    opacity:.07;
}


.section-title {

    font-family:
        "Space Grotesk";

    font-size:
        clamp(
            48px,
            7vw,
            105px
        );

    line-height:.9;

    letter-spacing:-.07em;

    font-weight:800;

    margin:0;
}


/* =========================================================
   SEARCH PANEL
========================================================= */

.search-panel {

    position:relative;

    padding:
        clamp(28px,5vw,65px);

    border-radius:
        clamp(28px,4vw,50px);

    background:
        var(--glass);

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

    box-shadow:
        var(--shadow);

    backdrop-filter:
        blur(28px);

    overflow:hidden;
}


.search-panel::before {

    content:"01";

    position:absolute;

    right:35px;

    top:15px;

    font-family:
        "Space Grotesk";

    font-size:
        clamp(80px,13vw,180px);

    line-height:1;

    font-weight:800;

    opacity:.045;

    pointer-events:none;
}


.search-label {

    font-size:11px;

    font-weight:800;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:var(--muted);

    margin-bottom:18px;
}


.search-input-wrap {

    display:flex;

    gap:12px;
}


.search-input {

    flex:1;

    min-width:0;

    height:72px;

    border-radius:20px;

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

    background:
        var(--bg2);

    color:var(--text);

    padding:
        0 24px;

    font-size:18px;

    outline:none;

    transition:.25s ease;
}


.search-input:focus {

    border-color:
        var(--text);

    box-shadow:
        0 0 0 5px rgba(127,127,127,.08);
}


.search-button {

    height:72px;

    min-width:150px;

    border-radius:20px;

    border:none;

    background:
        var(--text);

    color:
        var(--bg);

    font-weight:800;

    cursor:pointer;

    transition:.25s ease;
}


.search-button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 20px 40px rgba(0,0,0,.2);
}


/* =========================================================
   RESULTS
========================================================= */

.results {

    margin-top:35px;
}


.summary {

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:25px 28px;

    border-radius:24px;

    background:
        var(--glass);

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

    margin-bottom:20px;
}


.summary-number {

    font-family:
        "Space Grotesk";

    font-size:42px;

    font-weight:800;

    letter-spacing:-.06em;
}


.summary-label {

    font-size:10px;

    text-transform:uppercase;

    letter-spacing:.2em;

    color:var(--muted);
}


.status {

    padding:
        10px 15px;

    border-radius:14px;

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

    font-size:10px;

    font-weight:700;

    color:var(--muted);
}


.result-card {

    padding:
        clamp(25px,4vw,42px);

    border-radius:
        clamp(24px,3vw,38px);

    background:
        var(--glass);

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

    margin-bottom:18px;

    box-shadow:
        0 20px 70px rgba(0,0,0,.08);

    animation:
        cardIn .55s ease both;
}


@keyframes cardIn {

    from {

        opacity:0;

        transform:
            translateY(30px)
            scale(.98);
    }

    to {

        opacity:1;

        transform:
            translateY(0)
            scale(1);
    }
}


.result-top {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding-bottom:22px;

    margin-bottom:20px;

    border-bottom:
        1px solid var(--line);
}


.record {

    font-family:
        "Space Grotesk";

    font-size:12px;

    font-weight:800;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:var(--muted);
}


.copy-all {

    padding:
        10px 15px;

    border-radius:13px;

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

    background:
        var(--glass2);

    color:var(--text);

    cursor:pointer;

    font-size:11px;

    font-weight:700;
}


.info-row {

    display:grid;

    grid-template-columns:
        180px 1fr;

    gap:25px;

    padding:
        17px 0;

    border-bottom:
        1px solid var(--line);
}


.info-row:last-child {

    border-bottom:0;
}


.info-label {

    color:var(--muted);

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;
}


.info-value {

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:10px;

    text-align:right;

    font-size:16px;

    font-weight:700;

    word-break:break-word;
}


.copy-small {

    width:34px;

    height:34px;

    flex-shrink:0;

    border-radius:10px;

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

    background:
        var(--glass2);

    color:var(--muted);

    cursor:pointer;
}


/* =========================================================
   FEATURE BLOCKS
========================================================= */

.feature-grid {

    display:grid;

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

    gap:18px;
}


.feature {

    min-height:330px;

    padding:32px;

    border-radius:32px;

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

    background:
        var(--glass);

    box-shadow:
        var(--shadow);

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    transition:
        transform .4s ease,
        background .4s ease;
}


.feature:hover {

    transform:
        translateY(-10px)
        rotateX(2deg);
}


.feature-icon {

    width:58px;

    height:58px;

    border-radius:18px;

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

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:19px;
}


.feature-title {

    font-family:
        "Space Grotesk";

    font-size:34px;

    line-height:1;

    letter-spacing:-.06em;

    font-weight:800;

    margin-top:25px;
}


.feature-text {

    color:var(--muted);

    line-height:1.6;

    font-size:14px;

    margin-top:15px;
}


/* =========================================================
   HUGE BRAND SECTION
========================================================= */

.brand-section {

    padding:
        120px 0;

    text-align:center;
}


.brand-word {

    font-family:
        "Space Grotesk";

    font-size:
        clamp(
            80px,
            17vw,
            270px
        );

    font-weight:900;

    line-height:.75;

    letter-spacing:-.1em;

    color:transparent;

    -webkit-text-stroke:
        1.5px var(--text);

    opacity:.22;

    user-select:none;
}


.brand-caption {

    margin-top:45px;

    font-size:
        clamp(
            22px,
            3vw,
            40px
        );

    font-family:
        "Space Grotesk";

    font-weight:700;

    letter-spacing:-.04em;
}


/* =========================================================
   FOOTER
========================================================= */

.footer {

    padding:
        90px 0 35px;

    border-top:
        1px solid var(--line);
}


.footer-top {

    display:grid;

    grid-template-columns:
        1.5fr 1fr;

    gap:60px;

    padding-bottom:80px;
}


.footer-title {

    font-family:
        "Space Grotesk";

    font-size:
        clamp(
            45px,
            7vw,
            105px
        );

    line-height:.9;

    letter-spacing:-.075em;

    font-weight:800;

    max-width:850px;
}


.footer-description {

    color:var(--muted);

    font-size:14px;

    line-height:1.7;

    max-width:420px;

    margin-top:25px;
}


.footer-side {

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    align-items:flex-end;

    text-align:right;
}


.footer-credit {

    font-family:
        "Space Grotesk";

    font-size:18px;

    font-weight:700;
}


.footer-link {

    color:var(--muted);

    font-size:12px;

    margin-top:8px;
}


.footer-bottom {

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

    padding-top:25px;

    display:flex;

    justify-content:space-between;

    gap:20px;

    color:var(--muted);

    font-size:10px;

    text-transform:uppercase;

    letter-spacing:.16em;
}


/* =========================================================
   LOADING
========================================================= */

.loading {

    position:fixed;

    inset:0;

    z-index:9999;

    display:none;

    align-items:center;

    justify-content:center;

    background:
        rgba(0,0,0,.32);

    backdrop-filter:
        blur(25px);
}


.loading-box {

    padding:35px;

    border-radius:28px;

    background:
        var(--glass);

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

    text-align:center;
}


.loader {

    width:55px;

    height:55px;

    border-radius:50%;

    border:
        3px solid var(--line);

    border-top-color:
        var(--text);

    animation:
        spin .8s linear infinite;

    margin:auto;
}


@keyframes spin {

    to {
        transform:rotate(360deg);
    }
}


/* =========================================================
   TOAST
========================================================= */

.toast {

    position:fixed;

    left:50%;

    bottom:28px;

    z-index:10000;

    transform:
        translate(-50%,30px);

    opacity:0;

    pointer-events:none;

    transition:.3s ease;
}


.toast.show {

    opacity:1;

    transform:
        translate(-50%,0);
}


.toast-inner {

    padding:
        14px 20px;

    border-radius:16px;

    background:
        var(--text);

    color:
        var(--bg);

    font-size:12px;

    font-weight:800;

    box-shadow:
        0 20px 50px rgba(0,0,0,.25);
}


/* =========================================================
   PWA POPUP
========================================================= */

.pwa-popup {

    position:fixed;

    left:50%;

    bottom:25px;

    width:
        min(480px,calc(100% - 28px));

    z-index:9998;

    transform:
        translate(-50%,130%);

    opacity:0;

    border-radius:30px;

    padding:23px;

    background:
        var(--glass);

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

    box-shadow:
        0 35px 100px rgba(0,0,0,.30);

    backdrop-filter:
        blur(30px);

    transition:
        transform .7s cubic-bezier(.2,.8,.2,1),
        opacity .5s ease;
}


.pwa-popup.show {

    transform:
        translate(-50%,0);

    opacity:1;
}


.pwa-content {

    display:flex;

    align-items:center;

    gap:15px;
}


.pwa-logo {

    width:58px;

    height:58px;

    border-radius:18px;

    object-fit:cover;
}


.pwa-title {

    font-size:15px;

    font-weight:800;
}


.pwa-text {

    font-size:11px;

    color:var(--muted);

    margin-top:4px;
}


.pwa-actions {

    display:flex;

    gap:8px;

    margin-top:17px;
}


.pwa-install {

    flex:1;

    height:45px;

    border-radius:14px;

    border:0;

    background:
        var(--text);

    color:
        var(--bg);

    font-size:12px;

    font-weight:800;

    cursor:pointer;
}


.pwa-close {

    width:45px;

    height:45px;

    border-radius:14px;

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

    background:
        var(--glass2);

    color:var(--text);

    cursor:pointer;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:900px) {

    .hero {

        min-height:auto;

        padding:
            100px 0 90px;
    }


    .hero-3d {

        opacity:.38;

        right:-150px;

        top:35%;

        width:500px;

        height:500px;
    }


    .section-heading {

        grid-template-columns:1fr;
    }


    .feature-grid {

        grid-template-columns:
            1fr 1fr;
    }


    .footer-top {

        grid-template-columns:1fr;
    }


    .footer-side {

        align-items:flex-start;

        text-align:left;
    }
}


@media(max-width:620px) {

    .wrapper {

        width:
            calc(100% - 22px);
    }


    .nav {

        margin-top:10px;

        min-height:70px;

        padding:
            10px 12px;

        border-radius:20px;
    }


    .brand-logo {

        width:44px;
        height:44px;

        border-radius:14px;
    }


    .brand-name {

        font-size:16px;
    }


    .brand-small {

        font-size:7px;
    }


    .hero {

        padding:
            90px 0 85px;
    }


    .hero-title {

        font-size:
            clamp(
                55px,
                18vw,
                105px
            );
    }


    .hero-description {

        font-size:16px;

        margin-top:30px;
    }


    .hero-3d {

        right:-200px;

        top:30%;

        width:430px;

        height:430px;

        opacity:.25;
    }


    .section {

        padding:
            90px 0;
    }


    .section-number {

        font-size:100px;
    }


    .section-title {

        font-size:54px;
    }


    .search-input-wrap {

        flex-direction:column;
    }


    .search-input,
    .search-button {

        width:100%;

        height:64px;
    }


    .feature-grid {

        grid-template-columns:1fr;
    }


    .feature {

        min-height:280px;
    }


    .info-row {

        grid-template-columns:1fr;

        gap:8px;
    }


    .info-value {

        justify-content:flex-start;

        text-align:left;
    }


    .summary {

        padding:20px;

        align-items:flex-start;
    }


    .summary-number {

        font-size:35px;
    }


    .footer {

        padding-top:75px;
    }


    .footer-bottom {

        flex-direction:column;

        gap:10px;
    }


    .brand-word {

        font-size:
            24vw;
    }
}