:root {
    --bg:#070511;
    --panel:rgba(12,10,27,.58);
    --line:rgba(255,255,255,.11);
    --text:#f5efff;
    --muted:#aaa0c1;
    --purple:#8b5cf6;
    --pink:#f0abff;
    --cyan:#76e4ff;
    --shadow:0 24px 90px rgba(0,0,0,.45);
    --radius:24px;
    --font:'Inter',sans-serif;
    --display:'Space Grotesk',sans-serif
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    font-family:var(--font);
    background:radial-gradient(circle at 50% 0,#1b0e42 0,#0a0716 38%,#05030b 100%);
    color:var(--text);
    overflow-x:hidden;
    cursor:none
}

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

button {
    font:inherit;
    color:inherit
}

#space {
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:-4
}

.noise {
    pointer-events:none;
    position:fixed;
    inset:0;
    z-index:20;
    opacity:.045;
    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 baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
    mix-blend-mode:screen
}

.ambient {
    position:fixed;
    width:50vw;
    height:50vw;
    border-radius:50%;
    filter:blur(110px);
    opacity:.23;
    pointer-events:none;
    z-index:-3
}

.ambient-a {
    background:#6d28d9;
    top:10%;
    left:-15%
}

.ambient-b {
    background:#db2777;
    right:-18%;
    top:40%
}

.glass {
    background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
    border:1px solid var(--line);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),var(--shadow);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px)
}

.nav {
    position:fixed;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    width:min(1180px,calc(100% - 32px));
    height:70px;
    border-radius:24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 18px;
    z-index:30
}

.brand {
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    letter-spacing:-.02em
}

.brand-mark {
    width:34px;
    height:34px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#a78bfa,#f0abfc);
    color:#0b0617;
    box-shadow:0 0 36px rgba(139,92,246,.45)
}

.muted {
    opacity:.45
}

.nav-links {
    display:flex;
    gap:26px;
    color:#b9aecb;
    font-size:14px
}

.nav-links a {
    transition:.25s
}

.nav-links a:hover {
    color:#fff
}

.nav-actions {
    display:flex;
    align-items:center;
    gap:8px
}

.icon-btn,.cta-mini {
    border:1px solid var(--line);
    background:rgba(255,255,255,.04);
    height:40px;
    border-radius:14px;
    display:grid;
    place-items:center;
    padding:0 13px;
    cursor:none
}

.icon-btn {
    width:40px
}

.cta-mini {
    gap:8px;
    font-size:13px
}

.section {
    position:relative;
    width:min(1180px,calc(100% - 32px));
    margin:0 auto
}

.hero {
    min-height:100vh;
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:50px;
    align-items:center;
    padding-top:100px
}

.hero-art {
    position:absolute;
    inset:5% -15% auto;
    height:76vh;
    overflow:hidden;
    z-index:-1
}

.moon {
    position:absolute;
    width:330px;
    height:330px;
    border-radius:50%;
    left:50%;
    top:20%;
    transform:translateX(-50%);
    background:radial-gradient(circle at 35% 30%,#fff 0,#efe9ff 12%,#b995ff 45%,#5b3aa1 78%,#17102b 100%);
    box-shadow:0 0 90px rgba(188,146,255,.28),0 0 180px rgba(139,92,246,.16)
}

.moon:before {
    content:"";
    position:absolute;
    inset:18px;
    border-radius:50%;
    background:radial-gradient(circle at 45% 40%,rgba(22,9,46,.1),transparent 55%)
}

.moon-halo {
    position:absolute;
    width:590px;
    height:590px;
    border:1px solid rgba(193,160,255,.1);
    border-radius:50%;
    left:50%;
    top:1%;
    transform:translateX(-50%);
    box-shadow:inset 0 0 100px rgba(125,75,255,.05)
}

.cloud {
    position:absolute;
    width:55vw;
    height:200px;
    filter:blur(16px);
    opacity:.75;
    background:radial-gradient(ellipse at 20% 70%,rgba(32,16,67,.95),transparent 55%),radial-gradient(ellipse at 60% 50%,rgba(22,17,42,.97),transparent 60%),radial-gradient(ellipse at 85% 75%,rgba(40,16,74,.9),transparent 48%)
}

.cloud-1 {
    left:-8%;
    bottom:5%;
    transform:rotate(-8deg)
}

.cloud-2 {
    right:-12%;
    bottom:3%;
    transform:rotate(7deg)
}

.cloud-3 {
    left:16%;
    bottom:-11%;
    width:70vw;
    opacity:.58
}

.orbit {
    position:absolute;
    border:1px solid rgba(207,182,255,.16);
    border-radius:50%;
    left:50%;
    top:28%;
    transform:translate(-50%,-50%) rotate(-20deg);
    pointer-events:none
}

.orbit-1 {
    width:720px;
    height:260px
}

.orbit-2 {
    width:900px;
    height:370px;
    transform:translate(-50%,-50%) rotate(17deg)
}

.hero-copy {
    padding:70px 0 30px
}

.eyebrow,.section-kicker {
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#a796bb
}

.eyebrow span {
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#b68cff;
    box-shadow:0 0 16px #b68cff;
    margin-right:9px
}

.hero h1 {
    font-family:var(--display);
    font-size:clamp(48px,6vw,88px);
    line-height:.96;
    letter-spacing:-.055em;
    margin:18px 0 22px;
    max-width:760px
}

.gradient-text {
    background:linear-gradient(90deg,#fff 10%,#d9c0ff 37%,#9f7cff 68%,#ffb7f8 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-shadow:0 0 44px rgba(179,141,255,.16)
}

.hero-desc {
    max-width:640px;
    color:#bdb2cb;
    font-size:17px;
    line-height:1.75;
    margin:0
}

.hero-pills,.tag-row {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:22px
}

.hero-pills span,.tag-row span {
    border:1px solid var(--line);
    padding:8px 12px;
    border-radius:100px;
    color:#cfc4d8;
    background:rgba(255,255,255,.035);
    font-size:12px
}

.hero-actions {
    display:flex;
    gap:12px;
    margin-top:30px
}

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:14px 18px;
    border-radius:15px;
    border:1px solid var(--line);
    transition:transform .25s,box-shadow .25s,border-color .25s
}

.btn.primary {
    background:linear-gradient(135deg,#9f7bff,#7c4dff);
    border-color:rgba(255,255,255,.18);
    box-shadow:0 12px 40px rgba(99,42,196,.32)
}

.btn:hover {
    transform:translateY(-3px);
    border-color:rgba(255,255,255,.25)
}

.quick-stats {
    display:flex;
    gap:38px;
    margin-top:40px
}

.quick-stats div {
    display:flex;
    flex-direction:column;
    gap:5px
}

.quick-stats strong {
    font-family:var(--display);
    font-size:22px
}

.quick-stats span {
    font-size:11px;
    color:#8d829e
}

.hero-card-wrap {
    display:flex;
    justify-content:flex-end
}

.profile-card {
    width:min(360px,100%);
    border-radius:30px;
    padding:22px;
    position:relative;
    transform-style:preserve-3d;
    overflow:hidden
}

.profile-card:before {
    content:"";
    position:absolute;
    inset:-1px;
    background:radial-gradient(circle at 50% 0,rgba(180,140,255,.25),transparent 38%);
    pointer-events:none
}

.profile-card-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#9f96ab;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.14em
}

.status-dot {
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#86efac;
    box-shadow:0 0 14px #4ade80;
    margin-right:5px
}

.more {
    background:none;
    border:none;
    color:#9f96ab
}

.avatar-shell {
    width:150px;
    height:150px;
    margin:36px auto 22px;
    position:relative;
    display:grid;
    place-items:center
}

.avatar-ring {
    position:absolute;
    inset:0;
    border-radius:50%;
    background:conic-gradient(from 120deg,#f0abff,#8b5cf6,#54d2ff,#f0abff);
    filter:blur(1px);
    animation:spin 10s linear infinite
}

.avatar-core {
    width:126px;
    height:126px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-family:var(--display);
    font-size:56px;
    font-weight:700;
    color:#f8efff;
    background:radial-gradient(circle at 40% 30%,#3b2b68,#120b25 72%);
    border:5px solid #150d2b;
    box-shadow:inset 0 0 50px rgba(166,117,255,.18),0 0 50px rgba(155,102,255,.24)
}

.profile-card h2 {
    text-align:center;
    font-family:var(--display);
    font-size:30px;
    margin:0
}

.role,.location {
    text-align:center;
    color:#8f85a0;
    font-size:12px;
    margin:6px 0
}

.location {
    margin-top:10px
}

.music-card {
    margin-top:20px;
    border:1px solid var(--line);
    border-radius:20px;
    padding:12px;
    display:grid;
    grid-template-columns:44px 1fr 40px;
    align-items:center;
    gap:11px;
    background:rgba(0,0,0,.15)
}

.album-orb {
    width:44px;
    height:44px;
    border-radius:14px;
    background:radial-gradient(circle at 35% 25%,#d9b6ff,#6942c7 50%,#120d25 100%);
    box-shadow:0 0 24px rgba(137,87,255,.24)
}

.track-meta {
    display:flex;
    flex-direction:column;
    gap:3px
}

.track-meta strong {
    font-size:13px
}

.track-meta span {
    font-size:10px;
    color:#82798e
}

.play {
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid var(--line);
    background:rgba(255,255,255,.06);
    cursor:none
}

.wave {
    grid-column:1/-1;
    display:flex;
    gap:4px;
    align-items:center;
    height:17px
}

.wave i {
    display:block;
    width:3px;
    border-radius:100px;
    background:linear-gradient(#f0abff,#7f6bff);
    height:35%;
    opacity:.7
}

.wave i:nth-child(2) {
    height:75%
}

.wave i:nth-child(3) {
    height:46%
}

.wave i:nth-child(4) {
    height:90%
}

.wave i:nth-child(5) {
    height:58%
}

.wave i:nth-child(6) {
    height:78%
}

.wave i:nth-child(7) {
    height:40%
}

.wave i:nth-child(8) {
    height:65%
}

.section-pad {
    padding:120px 0
}

.section-head {
    max-width:720px;
    margin-bottom:50px
}

.section-head h2 {
    font-family:var(--display);
    font-size:48px;
    letter-spacing:-.04em;
    margin:10px 0
}

.section-head p {
    color:#9f95ad;
    line-height:1.7
}

.about-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px
}

.story-card {
    padding:28px;
    border-radius:26px;
    min-height:290px
}

.card-icon {
    width:40px;
    height:40px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:rgba(174,135,255,.1);
    border:1px solid rgba(174,135,255,.15);
    margin-bottom:22px
}

.story-card h3 {
    margin:0 0 12px;
    font-family:var(--display);
    font-size:21px
}

.story-card p {
    color:#9d93aa;
    line-height:1.75;
    font-size:14px
}

.meter {
    margin-top:20px
}

.meter>div {
    display:flex;
    justify-content:space-between;
    color:#a89eaf;
    font-size:11px
}

.meter i {
    display:block;
    height:6px;
    background:rgba(255,255,255,.06);
    border-radius:100px;
    margin-top:8px;
    overflow:hidden
}

.meter em {
    display:block;
    height:100%;
    background:linear-gradient(90deg,#7449ff,#de9dff);
    border-radius:inherit;
    box-shadow:0 0 16px rgba(151,99,255,.45)
}

.clean-list {
    list-style:none;
    padding:0;
    margin:18px 0 0
}

.clean-list li {
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
    color:#b5acbf;
    font-size:13px;
    line-height:1.55
}

.clean-list li:last-child {
    border-bottom:none
}

.clean-list li span {
    color:#7b65a1;
    font-size:10px;
    margin-top:3px
}

.skill-orbit {
    height:560px;
    position:relative;
    max-width:850px;
    margin:0 auto;
    border-radius:38px;
    background:radial-gradient(circle at center,rgba(132,87,235,.12),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.012));
    border:1px solid var(--line);
    box-shadow:inset 0 0 70px rgba(118,87,255,.07)
}

.skill-orbit:before,.skill-orbit:after {
    content:"";
    position:absolute;
    inset:80px 140px;
    border:1px solid rgba(195,170,255,.09);
    border-radius:50%
}

.skill-orbit:after {
    inset:140px 90px;
    transform:rotate(55deg)
}

.skill-node {
    position:absolute;
    left:var(--x);
    top:var(--y);
    transform:translate(-50%,-50%);
    width:86px;
    height:86px;
    border-radius:50%;
    border:1px solid var(--line);
    background:rgba(13,9,29,.66);
    box-shadow:0 0 28px rgba(135,90,255,.12);
    font-size:10px;
    letter-spacing:.12em;
    cursor:none;
    transition:.25s
}

.skill-node:hover,.skill-node.active {
    background:rgba(133,90,255,.18);
    border-color:rgba(209,185,255,.28);
    box-shadow:0 0 50px rgba(135,90,255,.24);
    transform:translate(-50%,-50%) scale(1.05)
}

.skill-core {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:250px;
    height:250px;
    border-radius:50%;
    display:grid;
    place-items:center;
    text-align:center;
    padding:30px
}

.skill-core span {
    font-family:var(--display);
    font-size:27px;
    font-weight:700;
    letter-spacing:.02em
}

.skill-core p {
    color:#968ca0;
    font-size:11px;
    line-height:1.5;
    max-width:150px
}

.skill-line {
    width:130px;
    height:4px;
    border-radius:100px;
    background:rgba(255,255,255,.05);
    overflow:hidden
}

.skill-line i {
    display:block;
    height:100%;
    width:94%;
    border-radius:inherit;
    background:linear-gradient(90deg,#7f55ff,#ebafff);
    box-shadow:0 0 16px rgba(161,111,255,.5)
}

.skill-core b {
    font-size:10px;
    color:#bdb3cc
}

.project-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px
}

.project-card {
    border-radius:26px;
    overflow:hidden;
    transform-style:preserve-3d
}

.project-visual {
    height:260px;
    padding:18px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:relative;
    overflow:hidden
}

.project-visual:before {
    content:"";
    position:absolute;
    inset:-40%;
    background:radial-gradient(circle at 50% 40%,rgba(195,155,255,.4),transparent 45%),linear-gradient(135deg,#0b0619,#201046 50%,#08040f);
    transform:rotate(15deg)
}

.project-visual:after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,transparent 25%,rgba(255,255,255,.08) 50%,transparent 75%);
    transform:translateX(-100%);
    transition:1.1s
}

.project-card:hover .project-visual:after {
    transform:translateX(100%)
}

.project-visual span,.project-visual strong {
    position:relative;
    z-index:1
}

.project-visual span {
    font-size:10px;
    color:#a398b1
}

.project-visual strong {
    font-family:var(--display);
    font-size:22px;
    letter-spacing:.1em
}

.v2:before {
    background:radial-gradient(circle at 55% 40%,rgba(255,170,229,.38),transparent 45%),linear-gradient(135deg,#140714,#3b1030 56%,#08040f)
}

.v3:before {
    background:radial-gradient(circle at 38% 55%,rgba(120,223,255,.32),transparent 42%),linear-gradient(135deg,#061019,#132347 56%,#05070f)
}

.project-body {
    padding:22px
}

.project-body>span {
    font-size:10px;
    color:#93879f;
    text-transform:uppercase;
    letter-spacing:.13em
}

.project-body h3 {
    font-family:var(--display);
    margin:7px 0;
    font-size:21px
}

.project-body p {
    font-size:13px;
    color:#9c93a7;
    line-height:1.65;
    min-height:44px
}

.text-link {
    display:inline-block;
    font-size:12px;
    margin-top:8px;
    color:#d4c2f9
}

.links-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px
}

.social-card {
    border-radius:20px;
    padding:16px;
    display:grid;
    grid-template-columns:48px 1fr auto;
    align-items:center;
    gap:14px;
    transition:.25s
}

.social-card:hover {
    transform:translateY(-4px);
    border-color:rgba(205,178,255,.28);
    background:rgba(255,255,255,.055)
}

.social-icon {
    width:48px;
    height:48px;
    border-radius:16px;
    display:grid;
    place-items:center;
    background:rgba(184,145,255,.09);
    border:1px solid rgba(184,145,255,.12);
    font-size:22px
}

.social-card span:nth-child(2) {
    display:flex;
    flex-direction:column;
    gap:4px
}

.social-card b {
    font-size:14px
}

.social-card small {
    color:#8f859b;
    font-size:11px
}

.social-card em {
    font-style:normal;
    color:#81768f
}

.link-bar {
    margin-top:12px;
    border-radius:20px;
    padding:14px 16px;
    display:flex;
    align-items:center;
    gap:13px;
    color:#a79bad
}

.link-bar strong {
    font-family:var(--display);
    font-size:14px;
    color:#ddd3ea
}

.copy-btn {
    margin-left:auto;
    border:1px solid var(--line);
    background:rgba(255,255,255,.05);
    border-radius:11px;
    padding:9px 12px;
    cursor:none
}

.contact-panel {
    border-radius:30px;
    padding:40px;
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:30px;
    background:radial-gradient(circle at 15% 50%,rgba(139,92,246,.19),transparent 35%),rgba(255,255,255,.035)
}

.contact-panel h2 {
    font-family:var(--display);
    font-size:44px;
    margin:8px 0
}

.contact-panel p {
    color:#9e94aa;
    max-width:580px
}

.footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#6e6578;
    padding-top:40px;
    padding-bottom:50px;
    font-size:12px
}

.footer>div {
    display:flex;
    gap:14px;
    align-items:center
}

.scroll-progress {
    position:fixed;
    right:13px;
    top:50%;
    transform:translateY(-50%);
    width:3px;
    height:90px;
    background:rgba(255,255,255,.07);
    border-radius:10px;
    z-index:25
}

.scroll-progress i {
    display:block;
    width:100%;
    height:0;
    border-radius:inherit;
    background:linear-gradient(#a17bff,#f3b3fa);
    box-shadow:0 0 13px rgba(186,137,255,.5)
}

.cursor-dot,.cursor-ring,.cursor-label {
    position:fixed;
    pointer-events:none;
    z-index:100;
    mix-blend-mode:screen
}

.cursor-dot {
    width:6px;
    height:6px;
    background:#fff;
    border-radius:50%;
    transform:translate(-50%,-50%);
    box-shadow:0 0 15px #fff
}

.cursor-ring {
    width:38px;
    height:38px;
    border:1px solid rgba(213,190,255,.55);
    border-radius:50%;
    transform:translate(-50%,-50%);
    transition:width .2s,height .2s,border-color .2s
}

.cursor-label {
    font-size:9px;
    letter-spacing:.12em;
    color:#fff;
    opacity:0;
    transform:translate(18px,18px);
    transition:opacity .2s
}

.loader {
    position:fixed;
    inset:0;
    background:#05030b;
    display:grid;
    place-items:center;
    z-index:200
}

.loader-orbit {
    width:90px;
    height:90px;
    border:1px solid rgba(209,187,255,.16);
    border-top-color:#ba94ff;
    border-radius:50%;
    animation:spin 1s linear infinite;
    box-shadow:0 0 45px rgba(140,88,255,.25)
}

.loader-text {
    position:absolute;
    font-family:var(--display);
    font-size:13px;
    color:#bfa9df
}

.toast {
    position:fixed;
    bottom:24px;
    left:50%;
    transform:translate(-50%,20px);
    padding:11px 14px;
    border-radius:13px;
    background:#161126;
    border:1px solid var(--line);
    opacity:0;
    transition:.25s;
    z-index:60;
    font-size:12px
}

.toast.show {
    opacity:1;
    transform:translate(-50%,0)
}

.reveal {
    opacity:0;
    transform:translateY(24px);
    transition:opacity .8s,transform .8s
}

.reveal.visible {
    opacity:1;
    transform:none
}

.delay-1 {
    transition-delay:.08s
}

.delay-2 {
    transition-delay:.16s
}

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

@media(max-width:960px) {
    .nav-links {
        display:none
    }
    .hero {
        grid-template-columns:1fr;
        padding-top:150px
    }
    .hero-card-wrap {
        justify-content:flex-start
    }
    .about-grid,.project-grid {
        grid-template-columns:1fr
    }
    .links-grid {
        grid-template-columns:1fr
    }
    .contact-panel {
        align-items:flex-start;
        flex-direction:column
    }
    .section-head h2 {
        font-size:39px
    }
    .hero h1 {
        font-size:clamp(46px,12vw,76px)
    }
}

@media(max-width:600px) {
    body {
        cursor:auto
    }
    .cursor-dot,.cursor-ring,.cursor-label {
        display:none
    }
    .nav {
        top:10px;
        width:calc(100% - 18px);
        height:62px;
        border-radius:19px
    }
    .cta-mini {
        display:none
    }
    .hero {
        min-height:auto;
        padding-top:132px
    }
    .hero-copy {
        padding-top:30px
    }
    .hero-desc {
        font-size:15px
    }
    .quick-stats {
        gap:22px
    }
    .skill-orbit {
        height:460px
    }
    .skill-orbit:before,.skill-orbit:after {
        inset:50px 60px
    }
    .skill-core {
        width:185px;
        height:185px
    }
    .skill-node {
        width:70px;
        height:70px;
        font-size:9px
    }
    .moon {
        width:220px;
        height:220px
    }
    .section-pad {
        padding:85px 0
    }
    .footer {
        flex-direction:column;
        gap:12px;
        align-items:flex-start
    }
}