*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
    --bg:#07060f;
    --bg-elev:#0e0c1f;
    --fg:#f5f3ff;
    --fg-dim:#a8a5c2;
    --muted:#6e6a8a;
    --line:rgba(255,255,255,.08);
    --line-strong:rgba(255,255,255,.16);
    --card:rgba(255,255,255,.04);
    --card-hi:rgba(255,255,255,.07);

    --purple:#a78bfa;
    --purple-deep:#7c3aed;
    --cyan:#22d3ee;
    --pink:#f472b6;
    --green:#a3e635;
    --orange:#fb923c;
    --blue:#60a5fa;

    --mono:'Space Mono',ui-monospace,monospace;
    --display:'Unbounded','Space Grotesk',system-ui,sans-serif;

    --ease:cubic-bezier(.2,.7,.2,1);
    --ease-out:cubic-bezier(.16,1,.3,1);

    --container:1180px;
    --radius:18px;
    --radius-lg:24px;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
    font-family:var(--mono);
    background:var(--bg);
    color:var(--fg);
    line-height:1.6;
    overflow-x:hidden;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

::selection{background:var(--purple-deep);color:#fff}

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

img{max-width:100%;display:block}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

input,textarea{font:inherit;color:inherit}


.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}

.bg::before{
    content:"";
    position:absolute;
    inset:-20%;
    background:
        radial-gradient(40% 35% at 18% 22%, rgba(124,58,237,.55), transparent 60%),
        radial-gradient(35% 40% at 82% 30%, rgba(34,211,238,.35), transparent 60%),
        radial-gradient(45% 40% at 50% 95%, rgba(244,114,182,.4), transparent 60%),
        radial-gradient(30% 30% at 80% 80%, rgba(163,230,53,.18), transparent 60%);
    filter:blur(60px) saturate(120%);
    animation:bgDrift 32s var(--ease) infinite alternate;
}

.bg::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(ellipse at center, rgba(0,0,0,.85), transparent 75%);
    -webkit-mask-image:radial-gradient(ellipse at center, rgba(0,0,0,.85), transparent 75%);
}

.noise{
    position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.04;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/></svg>");
    mix-blend-mode:overlay;
}

@keyframes bgDrift{
    0%{transform:translate3d(0,0,0) scale(1)}
    50%{transform:translate3d(-3%,2%,0) scale(1.04)}
    100%{transform:translate3d(2%,-2%,0) scale(1.02)}
}


.scroll-progress{
    position:fixed;
    top:0;left:0;right:0;
    height:2px;
    background:linear-gradient(90deg,var(--purple),var(--cyan),var(--pink));
    transform-origin:left;
    transform:scaleX(var(--p,0));
    z-index:60;
    transition:transform .08s linear;
}


.nav{
    position:sticky;
    top:0;
    z-index:50;
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    background:rgba(7,6,15,.55);
    border-bottom:1px solid var(--line);
}

.nav-inner{
    max-width:var(--container);
    margin:0 auto;
    padding:14px 24px;
    display:flex;
    align-items:center;
    gap:24px;
}

.nav-brand{
    display:flex;align-items:center;gap:10px;
    font-family:var(--display);
    font-weight:700;
    font-size:15px;
    letter-spacing:-.5px;
}

.nav-brand-dot{
    width:10px;height:10px;border-radius:50%;
    background:conic-gradient(from 0deg,var(--purple),var(--cyan),var(--pink),var(--purple));
    box-shadow:0 0 12px rgba(167,139,250,.6);
    animation:spin 6s linear infinite;
}

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

.nav-links{
    display:flex;
    align-items:center;
    gap:4px;
    margin-left:auto;
    position:relative;
}

.nav-link{
    position:relative;
    padding:10px 16px;
    font-size:13px;
    font-weight:700;
    color:var(--fg-dim);
    border-radius:10px;
    transition:color .2s;
    z-index:1;
}

.nav-link:hover{color:var(--fg)}
.nav-link.active{color:var(--fg)}

.nav-indicator{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    height:34px;
    background:var(--card-hi);
    border:1px solid var(--line-strong);
    border-radius:10px;
    transition:left .35s var(--ease-out),width .35s var(--ease-out),opacity .2s;
    z-index:0;
    pointer-events:none;
    opacity:0;
}

.nav-indicator.ready{opacity:1}

.nav-cta{
    margin-left:8px;
    padding:10px 18px;
    font-size:13px;
    font-weight:700;
    border-radius:10px;
    background:linear-gradient(135deg,var(--purple-deep),var(--pink));
    color:#fff;
    transition:transform .2s var(--ease),box-shadow .2s;
}

.nav-cta:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 30px rgba(167,139,250,.35);
}


.burger{
    display:none;
    width:42px;height:42px;
    border-radius:12px;
    border:1px solid var(--line);
    background:var(--card);
    margin-left:auto;
    position:relative;
}

.burger span{
    position:absolute;
    left:11px;right:11px;
    height:2px;
    background:var(--fg);
    border-radius:2px;
    transition:transform .3s var(--ease),top .3s var(--ease),opacity .2s;
}

.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:20px}
.burger span:nth-child(3){top:26px}

.burger.open span:nth-child(1){top:20px;transform:rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){top:20px;transform:rotate(-45deg)}


.menu{
    position:fixed;
    inset:0;
    z-index:45;
    background:
        radial-gradient(60% 50% at 20% 20%, rgba(124,58,237,.45), transparent 60%),
        radial-gradient(60% 50% at 80% 80%, rgba(34,211,238,.3), transparent 60%),
        rgba(7,6,15,.92);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    padding:80px 24px 40px;
    display:flex;
    flex-direction:column;
    pointer-events:none;
    opacity:0;
    transition:opacity .3s var(--ease);
}

.menu.open{
    opacity:1;
    pointer-events:auto;
}

.menu-links{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:8px;
}

.menu-link{
    font-family:var(--display);
    font-weight:700;
    font-size:42px;
    letter-spacing:-1px;
    color:var(--fg);
    padding:8px 0;
    position:relative;
    transform:translateY(20px);
    opacity:0;
    transition:color .25s,transform .55s var(--ease-out),opacity .55s var(--ease-out);
}

.menu.open .menu-link{
    transform:translateY(0);
    opacity:1;
}

.menu.open .menu-link:nth-child(1){transition-delay:.08s}
.menu.open .menu-link:nth-child(2){transition-delay:.14s}
.menu.open .menu-link:nth-child(3){transition-delay:.20s}
.menu.open .menu-link:nth-child(4){transition-delay:.26s}

.menu-link::before{
    content:attr(data-num);
    font-family:var(--mono);
    font-size:12px;
    color:var(--purple);
    margin-right:14px;
    vertical-align:super;
    opacity:.7;
}

.menu-link:hover,.menu-link.active{color:var(--purple)}

.menu-foot{
    margin-top:auto;
    padding-top:24px;
    border-top:1px solid var(--line);
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    color:var(--muted);
    font-size:12px;
}

.menu-foot a{color:var(--fg-dim)}
.menu-foot a:hover{color:var(--purple)}


main{
    position:relative;
    z-index:1;
}

.container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 24px;
}


.page{
    opacity:0;
    transform:translateY(8px);
    animation:pageIn .55s var(--ease-out) forwards;
}

.page.leaving{
    animation:pageOut .25s var(--ease) forwards;
}

@keyframes pageIn{
    to{opacity:1;transform:translateY(0)}
}

@keyframes pageOut{
    to{opacity:0;transform:translateY(-6px)}
}


.hero{
    min-height:min(94vh,860px);
    padding:80px 0 60px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
}

.hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--fg-dim);
    padding:8px 16px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:999px;
    width:fit-content;
    margin-bottom:28px;
}

.hero-title{
    font-family:var(--display);
    font-weight:900;
    font-size:clamp(48px,9vw,128px);
    line-height:.95;
    letter-spacing:-4px;
    margin-bottom:16px;
    background:linear-gradient(120deg,#fff 25%,var(--purple) 55%,var(--pink) 90%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
    opacity:0;
    transform:translateY(40px);
    animation:heroIn .85s var(--ease-out) .15s forwards;
    position:relative;
}

@keyframes heroIn{
    to{opacity:1;transform:translateY(0)}
}

.hero-sub{
    font-size:clamp(15px,1.6vw,18px);
    color:var(--fg-dim);
    max-width:600px;
    margin-bottom:36px;
    opacity:0;
    animation:fadeIn .8s var(--ease-out) .55s forwards;
}

.hero-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    opacity:0;
    animation:fadeIn .8s var(--ease-out) .7s forwards;
}

@keyframes fadeIn{to{opacity:1}}

.btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 24px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.5px;
    border-radius:12px;
    border:1px solid transparent;
    transition:transform .25s var(--ease),box-shadow .25s,background .25s,border-color .2s,color .2s;
    will-change:transform;
}

.btn-primary{
    background:linear-gradient(135deg,var(--purple-deep),var(--pink));
    color:#fff;
    box-shadow:0 10px 30px rgba(167,139,250,.25);
}

.btn-primary:hover{
    box-shadow:0 14px 40px rgba(167,139,250,.4);
}

.btn-ghost{
    background:var(--card);
    border-color:var(--line-strong);
    color:var(--fg);
}

.btn-ghost:hover{
    background:var(--card-hi);
    border-color:var(--purple);
}

.btn-arrow{
    transition:transform .25s var(--ease);
}

.btn:hover .btn-arrow{
    transform:translateX(4px);
}


.hero-stats{
    margin-top:64px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    border-top:1px solid var(--line);
    padding-top:32px;
    opacity:0;
    animation:fadeIn .8s var(--ease-out) .9s forwards;
}

.stat{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.stat-num{
    font-family:var(--display);
    font-weight:900;
    font-size:clamp(32px,4vw,52px);
    line-height:1;
    letter-spacing:-2px;
    background:linear-gradient(135deg,#fff,var(--purple));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.stat-num .suffix{font-size:.6em;color:var(--fg-dim);-webkit-text-fill-color:var(--fg-dim)}

.stat-label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:var(--muted);
}


.marquee{
    position:relative;
    margin:100px 0;
    overflow:hidden;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.02);
}

.marquee-track{
    display:flex;
    gap:48px;
    padding:22px 0;
    animation:slide 36s linear infinite;
    width:max-content;
}

.marquee:hover .marquee-track{animation-play-state:paused}

.marquee-item{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:var(--display);
    font-weight:700;
    font-size:22px;
    color:var(--fg-dim);
    letter-spacing:-.5px;
    white-space:nowrap;
    transition:color .2s;
}

.marquee-item:hover{color:var(--fg)}

.marquee-item::after{
    content:"";
    width:6px;height:6px;border-radius:50%;
    background:var(--purple);
    margin-left:38px;
}

@keyframes slide{
    to{transform:translateX(-50%)}
}


.section{
    padding:80px 0;
    position:relative;
}

.section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:36px;
    flex-wrap:wrap;
}

.section-eyebrow{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:2.5px;
    color:var(--purple);
    margin-bottom:10px;
}

.section-title{
    font-family:var(--display);
    font-weight:800;
    font-size:clamp(28px,4.5vw,52px);
    line-height:1.05;
    letter-spacing:-2px;
    max-width:680px;
}

.section-title em{
    font-style:normal;
    background:linear-gradient(120deg,var(--purple),var(--pink));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.section-link{
    font-size:13px;
    font-weight:700;
    color:var(--fg-dim);
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:10px 16px;
    border:1px solid var(--line);
    border-radius:10px;
    transition:color .2s,border-color .2s,background .2s;
}

.section-link:hover{color:var(--fg);border-color:var(--purple);background:var(--card-hi)}


.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:18px;
}

.card{
    position:relative;
    padding:28px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    overflow:hidden;
    transform-style:preserve-3d;
    transition:border-color .3s,background .3s,transform .15s var(--ease);
    isolation:isolate;
}

.card::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(167,139,250,.18),transparent 50%);
    opacity:0;
    transition:opacity .3s;
    pointer-events:none;
    z-index:0;
}

.card:hover::before{opacity:1}

.card:hover{
    border-color:var(--line-strong);
    background:var(--card-hi);
}

.card > *{position:relative;z-index:1}

.card-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--purple);
    background:rgba(167,139,250,.12);
    padding:6px 12px;
    border-radius:999px;
    margin-bottom:18px;
}

.card-tag-dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--purple);
    box-shadow:0 0 8px var(--purple);
}

.card-tag--cyan{color:var(--cyan);background:rgba(34,211,238,.12)}
.card-tag--cyan .card-tag-dot{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}

.card-tag--green{color:var(--green);background:rgba(163,230,53,.12)}
.card-tag--green .card-tag-dot{background:var(--green);box-shadow:0 0 8px var(--green)}

.card-tag--pink{color:var(--pink);background:rgba(244,114,182,.12)}
.card-tag--pink .card-tag-dot{background:var(--pink);box-shadow:0 0 8px var(--pink)}

.card-tag--orange{color:var(--orange);background:rgba(251,146,60,.12)}
.card-tag--orange .card-tag-dot{background:var(--orange);box-shadow:0 0 8px var(--orange)}

.card-title{
    font-family:var(--display);
    font-weight:700;
    font-size:26px;
    letter-spacing:-1px;
    line-height:1.15;
    margin-bottom:10px;
}

.card-desc{
    font-size:14px;
    color:var(--fg-dim);
    line-height:1.7;
    margin-bottom:18px;
}

.card-chips{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:18px;
}

.chip{
    font-size:11px;
    font-weight:700;
    letter-spacing:.5px;
    color:var(--fg-dim);
    background:rgba(255,255,255,.04);
    border:1px solid var(--line);
    padding:5px 10px;
    border-radius:6px;
    transition:color .2s,border-color .2s,background .2s;
}

.card:hover .chip{border-color:var(--line-strong)}

.card-meta{
    font-size:11px;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:18px;
}

.card-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.card-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    font-weight:700;
    padding:9px 14px;
    border-radius:9px;
    background:rgba(255,255,255,.05);
    border:1px solid var(--line);
    color:var(--fg);
    transition:background .2s,border-color .2s,color .2s;
}

.card-btn:hover{background:var(--purple);border-color:var(--purple);color:#fff}

.card-btn--primary{
    background:var(--purple-deep);
    border-color:var(--purple-deep);
    color:#fff;
}

.card-btn--primary:hover{background:var(--purple);border-color:var(--purple)}


.reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
}

.reveal.in{opacity:1;transform:translateY(0)}

.reveal-stagger > *{
    opacity:0;
    transform:translateY(20px);
    transition:opacity .65s var(--ease-out),transform .65s var(--ease-out);
}

.reveal-stagger.in > *{opacity:1;transform:translateY(0)}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.in > *:nth-child(2){transition-delay:.12s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.19s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.26s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.33s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.40s}
.reveal-stagger.in > *:nth-child(7){transition-delay:.47s}
.reveal-stagger.in > *:nth-child(8){transition-delay:.54s}


.search{
    position:relative;
    margin-bottom:32px;
}

.search-input{
    width:100%;
    padding:18px 56px 18px 52px;
    font-family:var(--mono);
    font-size:15px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    color:var(--fg);
    outline:none;
    transition:border-color .25s,background .25s,box-shadow .25s;
}

.search-input::placeholder{color:var(--muted)}

.search-input:focus{
    border-color:var(--purple);
    background:var(--card-hi);
    box-shadow:0 0 0 4px rgba(167,139,250,.15);
}

.search-icon{
    position:absolute;
    left:20px;top:50%;transform:translateY(-50%);
    width:18px;height:18px;
    color:var(--muted);
}

.search-hint{
    position:absolute;
    right:16px;top:50%;transform:translateY(-50%);
    font-size:11px;
    color:var(--muted);
    padding:4px 8px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--line);
    border-radius:6px;
    pointer-events:none;
}

.search-hint kbd{font-family:var(--mono)}


.repo-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:14px;
}

.repo-card{
    padding:20px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    transition:border-color .2s,background .2s,transform .2s var(--ease);
    display:flex;
    flex-direction:column;
    gap:8px;
    color:inherit;
}

.repo-card:hover{
    border-color:var(--purple);
    background:var(--card-hi);
    transform:translateY(-2px);
}

.repo-card-name{
    font-family:var(--display);
    font-weight:700;
    font-size:15px;
    color:var(--fg);
}

.repo-card-desc{
    font-size:13px;
    color:var(--fg-dim);
    flex:1;
    line-height:1.6;
}

.repo-card-foot{
    display:flex;
    align-items:center;
    gap:14px;
    font-size:12px;
    color:var(--muted);
}

.lang-dot{
    width:8px;height:8px;border-radius:50%;
    display:inline-block;
    margin-right:6px;
    vertical-align:middle;
}

.repo-loading{
    color:var(--muted);
    font-size:13px;
    text-align:center;
    padding:24px;
}


.about-hero{
    padding:60px 0 40px;
    border-bottom:1px solid var(--line);
}

.about-hero-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:60px;
    align-items:center;
}

.about-avatar{
    aspect-ratio:1;
    border-radius:24px;
    background:
        radial-gradient(80% 80% at 30% 20%, rgba(167,139,250,.5), transparent 60%),
        radial-gradient(80% 80% at 70% 80%, rgba(244,114,182,.5), transparent 60%),
        #16122a;
    position:relative;
    overflow:hidden;
    border:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--display);
    font-weight:900;
    font-size:clamp(48px,8vw,96px);
    letter-spacing:-3px;
    background-clip:padding-box;
}

.about-avatar::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
    background-size:32px 32px;
    mask-image:radial-gradient(circle at center,#000,transparent 70%);
}

.about-avatar-text{
    position:relative;
    z-index:2;
    background:linear-gradient(135deg,#fff,var(--purple));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}


.skill-row{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:14px;
}

.skill-name{
    font-size:13px;
    min-width:160px;
    color:var(--fg);
}

.skill-track{
    flex:1;
    height:8px;
    background:rgba(255,255,255,.06);
    border-radius:999px;
    overflow:hidden;
    position:relative;
}

.skill-fill{
    height:100%;
    width:0;
    background:linear-gradient(90deg,var(--purple),var(--pink));
    border-radius:999px;
    transition:width 1.4s var(--ease-out);
}

.skill-fill--cyan{background:linear-gradient(90deg,var(--cyan),var(--purple))}
.skill-fill--green{background:linear-gradient(90deg,var(--green),var(--cyan))}
.skill-fill--pink{background:linear-gradient(90deg,var(--pink),var(--orange))}

.skill-pct{
    font-size:11px;
    color:var(--fg-dim);
    min-width:42px;
    text-align:right;
}


.timeline{
    position:relative;
    padding-left:24px;
}

.timeline::before{
    content:"";
    position:absolute;
    left:6px;top:6px;bottom:6px;
    width:2px;
    background:linear-gradient(180deg,var(--purple),transparent);
}

.tl-item{
    position:relative;
    padding-bottom:28px;
}

.tl-item::before{
    content:"";
    position:absolute;
    left:-24px;top:6px;
    width:14px;height:14px;
    border-radius:50%;
    background:var(--bg);
    border:2px solid var(--purple);
    box-shadow:0 0 12px rgba(167,139,250,.6);
}

.tl-date{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:var(--purple);
    margin-bottom:6px;
}

.tl-title{
    font-family:var(--display);
    font-weight:700;
    font-size:18px;
    margin-bottom:6px;
}

.tl-desc{
    font-size:14px;
    color:var(--fg-dim);
}


.contact-grid{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:32px;
}

.form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:18px;
}

.form-label{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:var(--fg-dim);
}

.form-input,.form-textarea,.form-select{
    width:100%;
    padding:14px 18px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:12px;
    color:var(--fg);
    font-family:var(--mono);
    font-size:14px;
    outline:none;
    transition:border-color .25s,background .25s,box-shadow .25s;
}

.form-input:focus,.form-textarea:focus,.form-select:focus{
    border-color:var(--purple);
    background:var(--card-hi);
    box-shadow:0 0 0 4px rgba(167,139,250,.15);
}

.form-textarea{resize:vertical;min-height:140px}

.form-select{
    appearance:none;
    -webkit-appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23a8a5c2' d='M6 8 0 0h12z'/></svg>");
    background-repeat:no-repeat;
    background-position:right 18px center;
    padding-right:42px;
    cursor:pointer;
}

.form-select option{background:var(--bg-elev);color:var(--fg)}

.contact-side{
    padding:32px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    height:fit-content;
    position:sticky;
    top:90px;
}

.contact-side h3{
    font-family:var(--display);
    font-size:22px;
    font-weight:700;
    margin-bottom:8px;
    letter-spacing:-.5px;
}

.contact-side p{
    color:var(--fg-dim);
    font-size:13px;
    margin-bottom:20px;
    line-height:1.7;
}

.contact-links{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.contact-link{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--line);
    border-radius:12px;
    font-size:13px;
    font-weight:700;
    transition:background .2s,border-color .2s,transform .2s var(--ease);
}

.contact-link:hover{
    background:var(--card-hi);
    border-color:var(--purple);
    transform:translateX(2px);
}

.contact-link img{
    width:22px;height:22px;
    filter:brightness(0) invert(1);
    opacity:.8;
}

.contact-link-info{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.contact-link-info b{font-weight:700}
.contact-link-info span{font-size:11px;color:var(--muted);font-weight:400}

.contact-link-arrow{
    margin-left:auto;
    color:var(--muted);
    transition:color .2s,transform .2s var(--ease);
}

.contact-link:hover .contact-link-arrow{
    color:var(--purple);
    transform:translateX(2px);
}


.quote-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:16px;
}

.quote{
    padding:24px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    position:relative;
    transition:border-color .25s,background .25s;
}

.quote:hover{
    border-color:var(--line-strong);
    background:var(--card-hi);
}

.quote::before{
    content:"";
    position:absolute;
    left:24px;top:-2px;
    width:32px;height:4px;
    background:linear-gradient(90deg,var(--purple),var(--pink));
    border-radius:0 0 4px 4px;
}

.quote p{
    font-size:14px;
    line-height:1.7;
    color:var(--fg);
    margin-bottom:14px;
    font-style:italic;
}

.quote cite{
    font-size:12px;
    color:var(--muted);
    font-style:normal;
}


.foot{
    padding:60px 0 40px;
    border-top:1px solid var(--line);
    margin-top:80px;
}

.foot-grid{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1fr;
    gap:32px;
    margin-bottom:40px;
}

.foot-brand{
    font-family:var(--display);
    font-weight:900;
    font-size:32px;
    letter-spacing:-1.5px;
    margin-bottom:10px;
    background:linear-gradient(120deg,#fff,var(--purple));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.foot-tag{
    font-size:13px;
    color:var(--fg-dim);
    max-width:280px;
    line-height:1.7;
}

.foot-col h4{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:2px;
    color:var(--muted);
    margin-bottom:14px;
}

.foot-col a{
    display:block;
    font-size:13px;
    color:var(--fg-dim);
    padding:4px 0;
    transition:color .2s,transform .2s var(--ease);
}

.foot-col a:hover{color:var(--purple);transform:translateX(2px)}

.foot-bottom{
    padding-top:24px;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    font-size:12px;
    color:var(--muted);
}


.mag{display:inline-block}


@media (max-width:880px){
    .nav-links{display:none}
    .nav-cta{display:none}
    .burger{display:block}

    .hero-stats{grid-template-columns:repeat(2,1fr);gap:24px}

    .about-hero-grid{grid-template-columns:1fr;gap:32px}
    .about-avatar{aspect-ratio:16/10;max-height:340px}

    .contact-grid{grid-template-columns:1fr;gap:24px}
    .contact-side{position:static}

    .foot-grid{grid-template-columns:1fr 1fr;gap:24px}
}

@media (max-width:520px){
    .hero{padding:60px 0 40px;min-height:auto}
    .hero-title{letter-spacing:-2px}
    .section{padding:60px 0}
    .marquee-item{font-size:18px}
    .menu-link{font-size:32px}
    .foot-grid{grid-template-columns:1fr 1fr}
    .container{padding:0 20px}
    .card{padding:24px}
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
    .bg::before,.marquee-track,.nav-brand-dot{animation:none}
}