:root{
    --paper:#ebe9e2;
    --paper2:#e2e0d8;
    --ink:#101214;
    --grey:#777b7c;
    --line:rgba(16,18,20,.16);
    --white:#f4f3ee;
    --dark:#0c0e10;
    --lime:#d8ff3e;
    --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:Arial,Helvetica,sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}

body.loading{
    overflow:hidden;
}

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

button,input{
    font:inherit;
}

button{
    color:inherit;
}

::selection{
    background:var(--ink);
    color:var(--lime);
}


/* LOADER */

#loader{
    position:fixed;
    z-index:9999;
    inset:0;
    background:#0b0d0f;
    color:white;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:6vw;

    transition:
        opacity .8s var(--ease),
        visibility .8s;
}

#loader.done{
    opacity:0;
    visibility:hidden;
}

.loader-brand{
    font-size:clamp(60px,12vw,180px);
    font-weight:900;
    letter-spacing:-.09em;
    line-height:.8;
}

.loader-brand span{
    color:#64686a;
    font-weight:400;
}

.loader-track{
    width:100%;
    height:1px;
    background:#292c2e;
    margin-top:55px;
}

.loader-track i{
    display:block;
    height:1px;
    width:0;
    background:var(--lime);
}

.loader-meta{
    display:flex;
    justify-content:space-between;
    margin-top:13px;
    font-size:9px;
    letter-spacing:.18em;
    color:#777c7e;
}

.loader-meta strong{
    color:white;
}


/* GLOBAL OVERLAYS */

.noise{
    position:fixed;
    z-index:500;
    inset:0;
    opacity:.045;
    pointer-events:none;
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.grid-system{
    position:fixed;
    z-index:2;
    inset:0;
    pointer-events:none;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    padding:0 4vw;
}

.grid-system i{
    border-left:1px solid rgba(16,18,20,.035);
}

.grid-system i:last-child{
    border-right:1px solid rgba(16,18,20,.035);
}


/* CURSOR */

#cursor{
    position:fixed;
    z-index:1000;
    left:0;
    top:0;
    pointer-events:none;
    mix-blend-mode:difference;
}

.cursor-ring{
    position:absolute;
    width:48px;
    height:48px;
    border:1px solid white;
    border-radius:50%;
    transform:translate(-50%,-50%);
    transition:
        width .3s var(--ease),
        height .3s var(--ease);
}

.cursor-dot{
    position:absolute;
    width:4px;
    height:4px;
    background:white;
    border-radius:50%;
    transform:translate(-50%,-50%);
}

#cursorLabel{
    position:absolute;
    transform:translate(-50%,-50%);
    color:white;
    font-size:7px;
    font-weight:800;
    letter-spacing:.12em;
    opacity:0;
}

#cursor.active .cursor-ring{
    width:80px;
    height:80px;
    background:white;
}

#cursor.active .cursor-dot{
    opacity:0;
}

#cursor.active #cursorLabel{
    opacity:1;
    color:black;
}


/* HEADER */

#header{
    position:fixed;
    z-index:300;
    top:0;
    left:0;
    width:100%;
    height:76px;

    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    align-items:center;

    padding:0 4vw;

    border-bottom:1px solid rgba(16,18,20,.12);

    transition:
        background .4s,
        backdrop-filter .4s;
}

#header.scrolled{
    background:rgba(235,233,226,.78);
    backdrop-filter:blur(18px);
}

.logo{
    justify-self:start;
    font-size:23px;
    font-weight:900;
    letter-spacing:-.08em;
}

.logo span{
    color:#7a7e80;
    font-weight:400;
}

.header-center{
    justify-self:center;
    font-size:8px;
    font-weight:700;
    letter-spacing:.2em;
    color:#777b7d;
}

#header nav{
    justify-self:end;
    display:flex;
    align-items:center;
    gap:28px;
}

#header nav a{
    font-size:9px;
    font-weight:700;
    letter-spacing:.12em;
}

.nav-scan{
    border:1px solid var(--ink);
    padding:10px 15px;
    border-radius:100px;
}


/* HERO */

.hero{
    position:relative;
    min-height:100svh;
    height:1000px;
    overflow:hidden;
    border-bottom:1px solid var(--line);
}

#world{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.hero-radar{
    position:absolute;
    width:55vw;
    height:55vw;
    min-width:650px;
    min-height:650px;
    right:-13vw;
    top:50%;
    transform:translateY(-50%);
    border-radius:50%;
    border:1px solid rgba(16,18,20,.08);
}

.hero-radar:before,
.hero-radar:after{
    content:"";
    position:absolute;
    border:1px solid rgba(16,18,20,.07);
    border-radius:50%;
    inset:15%;
}

.hero-radar:after{
    inset:33%;
}

.coordinates{
    position:absolute;
    z-index:4;
    right:4vw;
    top:110px;
    display:flex;
    gap:18px;
    font-size:8px;
    letter-spacing:.15em;
    color:#888c8d;
}

.hero-status{
    position:absolute;
    z-index:4;
    right:4vw;
    bottom:45px;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:8px;
    letter-spacing:.15em;
}

.hero-status i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--lime);
    box-shadow:0 0 18px var(--lime);
}

.hero-copy{
    position:relative;
    z-index:5;
    padding:165px 4vw 70px;
}

.hero-overline{
    display:flex;
    justify-content:space-between;
    width:54%;
    margin-bottom:42px;
    color:#7d8183;
    font-size:8px;
    letter-spacing:.17em;
}

.hero h1{
    margin:0;
    font-size:clamp(75px,10.6vw,164px);
    line-height:.77;
    letter-spacing:-.085em;
    font-weight:900;
}

.hero h1 .line{
    display:block;
    overflow:hidden;
    padding-right:.08em;
}

.hero h1 .line>span{
    display:block;
    transform:translateY(110%);
}

body.ready .hero h1 .line>span{
    animation:titleIn 1.15s var(--ease) forwards;
}

body.ready .hero h1 .line:nth-child(2)>span{animation-delay:.08s}
body.ready .hero h1 .line:nth-child(3)>span{animation-delay:.16s}
body.ready .hero h1 .line:nth-child(4)>span{animation-delay:.24s}

@keyframes titleIn{
    to{transform:none}
}

.ghost-line{
    color:#a4a49f;
    font-weight:400;
}

.question-line{
    padding-left:11vw;
}

.hero-bottom{
    width:70%;
    margin-top:55px;
    margin-left:11vw;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
}

.hero-bottom p{
    width:390px;
    color:#6f7476;
    font-size:14px;
    line-height:1.65;
}

.round-action{
    width:150px;
    height:150px;
    border:1px solid var(--ink);
    border-radius:50%;
    padding:24px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    font-size:9px;
    font-weight:700;
    letter-spacing:.11em;

    transition:
        background .35s,
        color .35s;
}

.round-action strong{
    align-self:flex-end;
    font-size:25px;
    font-weight:400;
}

.round-action:hover{
    background:var(--ink);
    color:white;
}

.scroll-marker{
    position:absolute;
    left:4vw;
    bottom:40px;
    display:flex;
    align-items:center;
    gap:15px;
    font-size:7px;
    letter-spacing:.16em;
    color:#818587;
}

.scroll-marker i{
    width:65px;
    height:1px;
    background:#777;
    transform-origin:left;
    animation:scrollLine 2s infinite;
}

@keyframes scrollLine{
    0%{transform:scaleX(0)}
    50%{transform:scaleX(1)}
    100%{transform-origin:right;transform:scaleX(0)}
}


/* SECTION ID */

.section-id{
    position:absolute;
    top:40px;
    left:4vw;
    display:flex;
    gap:20px;
    font-size:8px;
    letter-spacing:.16em;
    color:#85898b;
}

.light-id{
    color:#5e6264;
}


/* STATEMENT */

.statement{
    position:relative;
    min-height:1300px;
    padding:200px 4vw;
}

.statement-stage{
    max-width:1500px;
    margin:auto;
}

.statement-small{
    margin:0 0 100px 50%;
    font-size:10px;
    line-height:1.6;
    letter-spacing:.14em;
    color:#737779;
}

.kinetic-text{
    margin:0;
    font-size:clamp(65px,10vw,155px);
    line-height:.82;
    letter-spacing:-.085em;
}

.kinetic-text span{
    display:block;
}

.kinetic-text .muted{
    color:#a4a39e;
    font-weight:400;
}

.shift-data{
    margin-top:150px;
    margin-left:50%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
}

.shift-data>div{
    display:flex;
    gap:25px;
    font-size:9px;
    font-weight:700;
    letter-spacing:.14em;
}

.shift-data p{
    margin:0;
    color:#696e70;
    font-size:15px;
    line-height:1.7;
}


/* SYSTEM */

.system{
    position:relative;
    min-height:1600px;
    padding:170px 4vw;
    background:var(--dark);
    color:white;
    overflow:hidden;
}

.system-heading p{
    color:#686d70;
    font-size:9px;
    letter-spacing:.17em;
}

.system-heading h2{
    margin:25px 0;
    font-size:clamp(70px,10vw,155px);
    line-height:.82;
    letter-spacing:-.085em;
}

.system-heading h2 span{
    color:#565b5e;
    font-weight:400;
}

.orbit-system{
    position:relative;
    width:min(1000px,90vw);
    height:700px;
    margin:100px auto;
    transform-style:preserve-3d;
}

.orbit{
    position:absolute;
    left:50%;
    top:50%;
    border:1px solid rgba(255,255,255,.08);
    border-radius:50%;
    transform:translate(-50%,-50%);
}

.orbit-1{width:240px;height:240px}
.orbit-2{width:480px;height:480px}
.orbit-3{width:700px;height:700px}

.orbit-core{
    position:absolute;
    z-index:5;
    left:50%;
    top:50%;
    width:170px;
    height:170px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    border:1px solid var(--lime);
    background:#111416;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    box-shadow:0 0 70px rgba(216,255,62,.08);
}

.orbit-core small{
    color:#74797c;
    font-size:8px;
    letter-spacing:.2em;
}

.orbit-core strong{
    font-size:48px;
    letter-spacing:-.08em;
}

.orbit-core span{
    color:var(--lime);
    font-size:7px;
    letter-spacing:.2em;
}

.module{
    position:absolute;
    z-index:6;
    width:120px;
    height:120px;
    border-radius:50%;
    border:1px solid #34383a;
    background:#0c0e10;
    color:white;
    cursor:pointer;
    transition:
        transform .5s var(--ease),
        background .4s,
        border .4s;
}

.module:hover,
.module.active{
    background:var(--lime);
    color:#101214;
    border-color:var(--lime);
    transform:scale(1.15);
}

.module small,
.module strong{
    display:block;
}

.module small{
    margin-bottom:8px;
    opacity:.5;
    font-size:7px;
}

.module strong{
    font-size:9px;
    letter-spacing:.12em;
}

.m1{left:11%;top:16%}
.m2{left:44%;top:2%}
.m3{right:11%;top:16%}
.m4{left:11%;bottom:16%}
.m5{left:44%;bottom:2%}
.m6{right:11%;bottom:16%}

.orbit-lines{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
}

.orbit-lines line{
    stroke:#292d2f;
    stroke-width:1;
    stroke-dasharray:3 7;
}

.module-info{
    border-top:1px solid #292d2f;
    padding-top:45px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10vw;
}

.module-info>div>span{
    color:var(--lime);
    font-size:8px;
    letter-spacing:.18em;
}

.module-info h3{
    margin:25px 0;
    font-size:clamp(55px,7vw,105px);
    line-height:.85;
    letter-spacing:-.07em;
}

.module-info p{
    max-width:500px;
    align-self:end;
    color:#8a8f91;
    line-height:1.7;
}


/* VERTICALS */

.vertical-experience{
    position:relative;
    padding:180px 4vw;
    min-height:1200px;
}

.vertical-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
}

.vertical-heading h2{
    margin:0;
    font-size:clamp(60px,8vw,125px);
    line-height:.85;
    letter-spacing:-.075em;
}

.vertical-heading h2 span{
    color:#a09f9a;
    font-weight:400;
}

.vertical-heading p{
    width:310px;
    color:#717577;
    line-height:1.65;
}

.vertical-console{
    margin-top:100px;
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:250px 1fr;
}

.vertical-selector{
    border-right:1px solid var(--line);
}

.v-button{
    width:100%;
    height:100px;
    border:0;
    border-bottom:1px solid var(--line);
    background:transparent;
    display:flex;
    gap:25px;
    align-items:center;
    padding:0 25px;
    text-align:left;
    cursor:pointer;
    transition:.35s var(--ease);
}

.v-button span{
    color:#8c9091;
    font-size:8px;
}

.v-button strong{
    font-size:11px;
    letter-spacing:.12em;
}

.v-button.active,
.v-button:hover{
    background:var(--ink);
    color:white;
    padding-left:38px;
}

.vertical-visual{
    position:relative;
    min-height:600px;
    overflow:hidden;
}

.vertical-code{
    position:absolute;
    top:28px;
    left:35px;
    right:35px;
    display:flex;
    justify-content:space-between;
    font-size:7px;
    letter-spacing:.16em;
    color:#85898b;
}

.flow-space{
    position:absolute;
    left:0;
    right:0;
    top:80px;
    height:410px;
}

.flow-space svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.flow-space path{
    fill:none;
    stroke:#a7a8a4;
    stroke-width:1;
    stroke-dasharray:5 8;
}

.flow-node{
    position:absolute;
    z-index:3;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    font-size:7px;
    letter-spacing:.12em;
}

.flow-node i{
    width:15px;
    height:15px;
    background:var(--paper);
    border:1px solid #5e6263;
    border-radius:50%;
}

.flow-node.primary i{
    width:35px;
    height:35px;
    background:var(--ink);
    box-shadow:0 0 0 12px rgba(16,18,20,.06);
}

.n1{left:7%;top:48%}
.n2{left:26%;top:25%}
.n3{left:48%;top:43%}
.n4{left:70%;top:24%}
.n5{right:6%;top:48%}

.signal-dot{
    position:absolute;
    z-index:4;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--lime);
    box-shadow:0 0 15px var(--lime);
    left:9%;
    top:50%;
    animation:signalTravel 5s ease-in-out infinite;
}

@keyframes signalTravel{
    0%{left:9%;top:50%}
    25%{left:28%;top:28%}
    50%{left:50%;top:47%}
    75%{left:72%;top:27%}
    100%{left:91%;top:50%}
}

.vertical-result{
    position:absolute;
    bottom:30px;
    left:35px;
    right:35px;
    border-top:1px solid var(--line);
    padding-top:22px;
    display:flex;
    justify-content:space-between;
}

.vertical-result span{
    font-size:8px;
    letter-spacing:.15em;
    color:#85898b;
}

.vertical-result strong{
    font-size:18px;
    letter-spacing:-.03em;
}


/* UPGRADE */

.upgrade{
    position:relative;
    min-height:1500px;
    padding:180px 4vw;
    background:#d9d7cf;
}

.upgrade-intro span{
    font-size:8px;
    letter-spacing:.16em;
}

.upgrade-intro h2{
    margin:30px 0;
    font-size:clamp(70px,10vw,150px);
    line-height:.82;
    letter-spacing:-.085em;
}

.upgrade-intro h2 span{
    color:#92928e;
    font-weight:400;
}

.upgrade-transition{
    min-height:600px;
    margin-top:130px;
    display:grid;
    grid-template-columns:1fr 180px 1fr;
    align-items:center;
    gap:40px;
}

.before-side,
.after-side{
    height:390px;
    border:1px solid var(--line);
    padding:35px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.before-side>strong,
.after-side>strong{
    font-size:9px;
    letter-spacing:.16em;
}

.broken-ui{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.broken-ui span{
    font-size:10px;
    color:#747879;
}

.broken-ui i{
    width:40%;
    height:1px;
    background:#999;
}

.broken-ui i:nth-of-type(2){
    margin-left:30%;
    width:60%;
}

.broken-ui i:nth-of-type(3){
    margin-left:10%;
    width:25%;
}

.upgrade-core{
    width:180px;
    height:180px;
    border-radius:50%;
    background:var(--ink);
    color:white;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    box-shadow:0 25px 80px rgba(0,0,0,.14);
}

.upgrade-core span{
    font-size:12px;
    font-weight:800;
}

.upgrade-core strong{
    color:var(--lime);
    font-size:40px;
    font-weight:300;
}

.score-big small{
    display:block;
    font-size:8px;
    letter-spacing:.15em;
    color:#777;
}

.score-big strong{
    font-size:140px;
    letter-spacing:-.1em;
    line-height:1;
}

.score-big span{
    color:#777;
}

.upgrade-offer{
    margin-top:180px;
    padding-top:40px;
    border-top:1px solid var(--ink);
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:50px;
    align-items:end;
}

.upgrade-offer>div:first-child>span{
    font-size:8px;
    letter-spacing:.17em;
}

.upgrade-offer h3{
    margin:20px 0 0;
    font-size:clamp(40px,5vw,75px);
    line-height:.88;
    letter-spacing:-.06em;
}

.upgrade-price small,
.upgrade-price span{
    display:block;
    color:#747879;
    font-size:8px;
    letter-spacing:.14em;
}

.upgrade-price strong{
    display:block;
    margin:10px 0;
    font-size:clamp(50px,6vw,85px);
    letter-spacing:-.07em;
}

.upgrade-button{
    width:130px;
    height:130px;
    border-radius:50%;
    border:1px solid var(--ink);
    display:grid;
    place-items:center;
    font-size:9px;
    font-weight:800;
}


/* PLANS */

.plans{
    position:relative;
    min-height:1100px;
    padding:180px 4vw;
}

.plans-title h2{
    margin:0 0 100px;
    font-size:clamp(70px,9vw,140px);
    line-height:.82;
    letter-spacing:-.08em;
}

.plans-title h2 span{
    color:#a09f9a;
    font-weight:400;
}

.plan-row{
    position:relative;
    display:grid;
    grid-template-columns:70px 1.1fr 1.4fr 180px 50px;
    gap:30px;
    align-items:center;
    min-height:150px;
    border-top:1px solid var(--line);
    transition:
        padding .4s var(--ease),
        background .4s;
}

.plan-row:last-child{
    border-bottom:1px solid var(--line);
}

.plan-row:hover{
    padding-left:25px;
    padding-right:25px;
}

.plan-row.featured:before{
    content:"RECOMMENDED";
    position:absolute;
    top:12px;
    right:0;
    color:#7b7f80;
    font-size:7px;
    letter-spacing:.16em;
}

.plan-no{
    color:#8b8f90;
    font-size:8px;
}

.plan-name span,
.plan-name strong{
    display:block;
}

.plan-name span{
    color:#8b8f90;
    font-size:8px;
    letter-spacing:.15em;
    margin-bottom:8px;
}

.plan-name strong{
    font-size:22px;
}

.plan-row p{
    color:#747879;
    font-size:13px;
    line-height:1.5;
    max-width:360px;
}

.plan-price strong{
    font-size:42px;
    letter-spacing:-.06em;
}

.plan-price span{
    color:#85898a;
    font-size:8px;
}

.plan-arrow{
    font-size:25px;
}


/* SCAN */

.scan{
    position:relative;
    min-height:1100px;
    background:#0c0e10;
    color:white;
    overflow:hidden;
    padding:180px 4vw;
}

#scanCanvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:.7;
}

.scan-grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:50px 50px;
}

.scan-id{
    color:#666b6d;
}

.scan-center{
    position:relative;
    z-index:5;
    max-width:1100px;
    margin:auto;
    text-align:center;
}

.scan-label{
    color:var(--lime);
    font-size:8px;
    letter-spacing:.2em;
}

.scan h2{
    margin:40px 0 30px;
    font-size:clamp(80px,12vw,180px);
    line-height:.76;
    letter-spacing:-.09em;
}

.scan h2 span{
    color:#555a5d;
    font-weight:400;
}

.scan-center>p{
    width:min(500px,100%);
    margin:40px auto 65px;
    color:#898e90;
    line-height:1.7;
}

.domain-field{
    width:min(850px,100%);
    margin:auto;
    height:90px;
    border-bottom:1px solid #656a6c;
    display:flex;
    align-items:center;
    text-align:left;
}

.domain-field>span{
    color:#626769;
    font-size:18px;
}

.domain-field input{
    flex:1;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    color:white;
    font-size:clamp(25px,4vw,48px);
    letter-spacing:-.04em;
}

.domain-field input::placeholder{
    color:#353a3c;
}

.domain-field button{
    width:100px;
    height:50px;
    border:1px solid #555a5c;
    border-radius:100px;
    background:transparent;
    color:white;
    font-size:9px;
    letter-spacing:.12em;
    cursor:pointer;
}

.scan-dimensions{
    width:min(850px,100%);
    margin:35px auto;
    display:flex;
    justify-content:space-between;
    color:#505557;
    font-size:7px;
    letter-spacing:.11em;
}

#scanOverlay{
    position:absolute;
    z-index:30;
    inset:0;
    background:#0b0d0f;
    opacity:0;
    visibility:hidden;
    transition:.5s;
}

#scanOverlay.active{
    opacity:1;
    visibility:visible;
}

.scanner-line{
    position:absolute;
    left:0;
    right:0;
    height:1px;
    background:var(--lime);
    box-shadow:0 0 30px var(--lime);
    animation:scanner 2s linear infinite;
}

@keyframes scanner{
    from{top:0}
    to{top:100%}
}

.scan-overlay-head{
    position:absolute;
    top:45px;
    left:4vw;
    right:4vw;
    display:flex;
    justify-content:space-between;
    color:#777c7e;
    font-size:8px;
    letter-spacing:.17em;
}

.scan-overlay-head strong{
    color:var(--lime);
    font-size:16px;
}

.scan-target{
    position:absolute;
    left:50%;
    top:50%;
    width:500px;
    height:500px;
    transform:translate(-50%,-50%);
}

.target-ring{
    position:absolute;
    border:1px solid #292d2f;
    border-radius:50%;
}

.r1{inset:0}
.r2{inset:17%}
.r3{inset:34%}

.target-ring:nth-child(1){animation:targetSpin 8s linear infinite}
.target-ring:nth-child(2){animation:targetSpin 5s linear infinite reverse}

@keyframes targetSpin{
    to{transform:rotate(360deg)}
}

.target-ring:before{
    content:"";
    position:absolute;
    top:50%;
    left:-3px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--lime);
}

.target-core{
    position:absolute;
    inset:42%;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--lime);
    color:#111;
}

.target-core span{
    position:absolute;
    top:calc(100% + 20px);
    white-space:nowrap;
    color:white;
    font-size:9px;
    letter-spacing:.14em;
}

.scan-message{
    position:absolute;
    bottom:60px;
    left:50%;
    transform:translateX(-50%);
    font-size:9px;
    letter-spacing:.2em;
    color:#8a8f91;
}

#scanResult{
    position:absolute;
    z-index:25;
    inset:0;
    padding:120px 6vw 70px;
    background:#e7e5dd;
    color:#111;
    opacity:0;
    visibility:hidden;
    transform:translateY(30px);
    transition:.8s var(--ease);
    overflow:auto;
}

#scanResult.active{
    opacity:1;
    visibility:visible;
    transform:none;
}

.result-top{
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    padding-bottom:20px;
    font-size:8px;
    letter-spacing:.16em;
}

.result-main{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10vw;
    padding:60px 0;
}

.score small{
    display:block;
    font-size:9px;
    letter-spacing:.17em;
}

.score strong{
    font-size:clamp(130px,18vw,280px);
    line-height:.8;
    letter-spacing:-.11em;
}

.score span{
    color:#777;
}

.result-bars{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:24px;
}

.result-bars>div{
    display:grid;
    grid-template-columns:140px 1fr 30px;
    gap:15px;
    align-items:center;
}

.result-bars span{
    font-size:8px;
    letter-spacing:.12em;
}

.result-bars i{
    height:2px;
    background:#c8c7c0;
}

.result-bars b{
    display:block;
    height:100%;
    width:var(--w);
    background:#111;
    transform-origin:left;
    animation:barGrow 1s var(--ease) both;
}

@keyframes barGrow{
    from{transform:scaleX(0)}
}

.result-bars strong{
    font-size:10px;
}

.finding{
    border-top:1px solid var(--ink);
    padding-top:30px;
    display:grid;
    grid-template-columns:200px 1fr auto;
    gap:50px;
}

.finding span{
    font-size:8px;
    letter-spacing:.14em;
}

.finding p{
    margin:0;
    max-width:650px;
    color:#5f6466;
    line-height:1.65;
}

.finding a{
    font-size:9px;
    font-weight:800;
}


/* FINAL */

.final{
    position:relative;
    min-height:1000px;
    background:var(--lime);
    overflow:hidden;
    padding:170px 4vw;
}

#finalCanvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:.2;
}

.final-copy{
    position:relative;
    z-index:5;
}

.final-copy>span{
    font-size:8px;
    letter-spacing:.18em;
}

.final h2{
    margin:80px 0;
    font-size:clamp(75px,11vw,170px);
    line-height:.77;
    letter-spacing:-.09em;
}

.final h2 em{
    color:rgba(16,18,20,.35);
    font-style:normal;
    font-weight:400;
}

.final-button{
    border-top:1px solid var(--ink);
    border-bottom:1px solid var(--ink);
    padding:30px 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:clamp(24px,4vw,60px);
    font-weight:800;
    letter-spacing:-.05em;
}

.final-button strong{
    font-size:50px;
    font-weight:300;
}


/* FOOTER */

footer{
    min-height:260px;
    padding:55px 4vw;
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:40px;
    align-items:end;
    background:#0c0e10;
    color:#727779;
    font-size:8px;
    line-height:1.6;
    letter-spacing:.12em;
}

.footer-logo{
    color:white;
    font-size:30px;
    font-weight:900;
    letter-spacing:-.08em;
}

.footer-logo span{
    color:#64696b;
    font-weight:400;
}


/* RESPONSIVE */

@media(max-width:900px){

    #cursor{display:none}

    #header{
        grid-template-columns:1fr auto;
    }

    .header-center{display:none}

    #header nav a:not(.nav-scan){
        display:none;
    }

    .hero{
        height:auto;
        min-height:900px;
    }

    .hero h1{
        font-size:clamp(62px,14vw,110px);
    }

    .question-line{
        padding-left:0;
    }

    .hero-overline{
        width:100%;
    }

    .hero-bottom{
        width:100%;
        margin-left:0;
    }

    .statement{
        min-height:auto;
    }

    .statement-small{
        margin-left:0;
    }

    .shift-data{
        margin-left:0;
        grid-template-columns:1fr;
    }

    .orbit-system{
        transform:scale(.8);
        margin-left:-5%;
    }

    .module-info{
        grid-template-columns:1fr;
    }

    .vertical-heading{
        display:block;
    }

    .vertical-heading p{
        margin-top:35px;
    }

    .vertical-console{
        grid-template-columns:1fr;
    }

    .vertical-selector{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        border-right:0;
    }

    .v-button{
        justify-content:center;
        padding:0 10px;
    }

    .v-button span{
        display:none;
    }

    .v-button.active,
    .v-button:hover{
        padding-left:10px;
    }

    .upgrade-transition{
        grid-template-columns:1fr;
    }

    .upgrade-core{
        margin:auto;
    }

    .upgrade-offer{
        grid-template-columns:1fr;
    }

    .plan-row{
        grid-template-columns:40px 1fr 120px 30px;
    }

    .plan-row p{
        display:none;
    }

    .result-main{
        grid-template-columns:1fr;
    }

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

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

}


@media(max-width:600px){

    .hero{
        min-height:820px;
    }

    .hero-copy{
        padding-top:140px;
    }

    .hero h1{
        font-size:58px;
        line-height:.82;
    }

    .hero-bottom{
        margin-top:40px;
        display:block;
    }

    .hero-bottom p{
        width:100%;
    }

    .round-action{
        width:115px;
        height:115px;
        margin-top:30px;
    }

    .coordinates,
    .hero-status{
        display:none;
    }

    .statement,
    .system,
    .vertical-experience,
    .upgrade,
    .plans,
    .scan,
    .final{
        padding-left:20px;
        padding-right:20px;
    }

    .kinetic-text{
        font-size:54px;
    }

    .system-heading h2,
    .vertical-heading h2,
    .upgrade-intro h2,
    .plans-title h2{
        font-size:55px;
    }

    .orbit-system{
        width:700px;
        margin-left:calc(50% - 350px);
        transform:scale(.55);
    }

    .vertical-selector{
        grid-template-columns:1fr 1fr;
    }

    .vertical-visual{
        min-height:520px;
    }

    .flow-node span{
        display:none;
    }

    .vertical-result{
        display:block;
    }

    .vertical-result strong{
        display:block;
        margin-top:10px;
    }

    .upgrade-transition{
        margin-top:70px;
    }

    .score-big strong{
        font-size:100px;
    }

    .plan-row{
        grid-template-columns:25px 1fr 100px 20px;
        gap:10px;
    }

    .plan-name strong{
        font-size:15px;
    }

    .plan-price strong{
        font-size:28px;
    }

    .scan{
        min-height:850px;
    }

    .scan h2{
        font-size:68px;
    }

    .domain-field{
        height:70px;
    }

    .domain-field>span{
        display:none;
    }

    .domain-field input{
        font-size:25px;
    }

    .scan-dimensions{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:12px;
        text-align:left;
    }

    .scan-target{
        width:320px;
        height:320px;
    }

    #scanResult{
        padding:90px 20px 40px;
    }

    .result-bars>div{
        grid-template-columns:100px 1fr 25px;
    }

    .final{
        min-height:750px;
    }

    .final h2{
        font-size:62px;
    }

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

}


@media(prefers-reduced-motion:reduce){

    *,
    *:before,
    *:after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        scroll-behavior:auto!important;
    }

}