*
{
    box-sizing:border-box
}
:root
{
    --bg:#05070b;
    --panel:#0b1018;
    --panel2:#101722;
    --line:#1b2632;
    --text:#edf1f7;
    --muted:#818d9e;
    --lime:#b7df60;
    --cyan:#68cfc8;
    --purple:#a99aff
}
html
{
    scroll-behavior:smooth;
    scroll-padding-top:90px
}
body
{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:Manrope,system-ui,sans-serif;
    overflow-x:hidden
}
a
{
    color:inherit;
    text-decoration:none
}
.ambient
{
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    filter:blur(130px);
    opacity:.12;
    pointer-events:none
}
.ambient-one
{
    background:#7d67ff;
    top:100px;
    right:4%
}
.ambient-two
{
    background:#75d8d0;
    top:1100px;
    left:-240px
}
.site-header
{
    height:82px;
    padding:0 max(5vw,24px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid #ffffff0d;
    position:sticky;
    top:0;
    background:#05070be8;
    backdrop-filter:blur(18px);
    z-index:20
}
.brand
{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.13em
}
.brand-mark
{
    width:37px;
    height:37px;
    border:1px solid #566174;
    border-radius:11px;
    display:grid;
    place-items:center;
    color:var(--lime);
    font-family:"DM Mono";
    font-size:12px;
    letter-spacing:-.1em
}
.brand-sub
{
    display:block;
    font:9px "DM Mono";
    color:#7e899a;
    margin-top:4px;
    letter-spacing:.15em
}
.nav
{
    display:flex;
    align-items:center;
    gap:34px;
    font-size:12px;
    color:#b8c0cc
}
.nav a:hover,.footer a:hover
{
    color:var(--lime)
}
.nav-cta
{
    border:1px solid #394454;
    padding:11px 15px;
    border-radius:6px;
    color:var(--text)
}
.nav-cta span
{
    color:var(--lime);
    margin-left:10px
}
.menu-toggle
{
    display:none;
    background:none;
    border:0;
    color:white;
    font-size:24px
}
.section-wrap
{
    width:min(1160px,90%);
    margin:auto
}
.hero
{
    min-height:670px;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    position:relative;
    padding-top:65px;
    padding-bottom:100px
}
.eyebrow,.section-kicker,.project-type,.panel-label,.ip-type,.exp-date,.exp-kind,.hero-meta,.scroll-cue,.art-label,.art-foot
{
    font:10px "DM Mono",monospace;
    letter-spacing:.13em
}
.eyebrow
{
    color:var(--lime);
    display:flex;
    align-items:center;
    gap:10px
}
.pulse,.live-dot
{
    width:7px;
    height:7px;
    background:var(--lime);
    border-radius:50%;
    box-shadow:0 0 14px #c7f36b
}
.hero h1
{
    font-size:clamp(48px,6.2vw,78px);
    letter-spacing:-.075em;
    line-height:1.05;
    margin:28px 0 24px;
    font-weight:800
}
.gradient-text
{
    background:linear-gradient(100deg,#d9f89b 5%,#7bded4 55%,#a99aff 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent
}
.hero-lede
{
    max-width:590px;
    color:#aab3c1;
    font-size:15px;
    line-height:1.9
}
.hero-actions
{
    display:flex;
    gap:13px;
    margin-top:32px
}
.button
{
    padding:14px 18px;
    border-radius:6px;
    font-size:12px;
    font-weight:800;
    display:inline-flex;
    gap:22px;
    align-items:center;
    transition:.2s
}
.button-primary
{
    background:var(--lime);
    color:#11170a
}
.button-primary:hover
{
    transform:translateY(-3px);
    box-shadow:0 10px 35px #c7f36325
}
.button-ghost
{
    border:1px solid #384252;
    color:#e8edf4
}
.button-ghost:hover
{
    border-color:var(--lime)
}
.hero-meta
{
    display:flex;
    align-items:center;
    gap:14px;
    color:#778292;
    margin-top:55px;
    font-size:9px
}
.hero-meta i
{
    width:4px;
    height:4px;
    background:#596575;
    border-radius:50%
}
.hero-visual
{
    height:440px;
    position:relative;
    display:grid;
    place-items:center
}
.orbit
{
    position:absolute;
    border:1px solid #9aa6bb25;
    border-radius:50%;
    transform:rotate(-22deg)
}
.orbit-a
{
    width:390px;
    height:260px
}
.orbit-b
{
    width:330px;
    height:420px;
    transform:rotate(58deg)
}
.core-card
{
    width:270px;
    height:290px;
    border:1px solid #ffffff28;
    border-radius:18px;
    background:linear-gradient(145deg,#1b2331dd,#0e121b);
    box-shadow:0 30px 100px #0009;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:20px;
    z-index:2
}
.core-top,.core-bottom
{
    display:flex;
    justify-content:space-between;
    color:#8793a5;
    font:9px "DM Mono";
    letter-spacing:.1em
}
.core-symbol
{
    font-size:92px;
    font-weight:800;
    letter-spacing:-.12em;
    text-align:center
}
.core-symbol span
{
    color:var(--lime)
}
    .core-symbol img {
        display: block;
        width: 100%;
        height: 200px;
        max-width: 200px;
        object-fit: contain;
        object-position: center;
        margin: auto;
    }
.core-index
{
    color:var(--lime)
}
.float-tag
{
    position:absolute;
    padding:10px 13px;
    background:#151c28;
    border:1px solid #3a4555;
    border-radius:5px;
    font:9px "DM Mono";
    letter-spacing:.08em;
    z-index:3;
    box-shadow:0 10px 30px #0008
}
.tag-ai
{
    top:55px;
    right:2%;
    color:var(--lime)
}
.tag-iot
{
    bottom:82px;
    left:0;
    color:var(--cyan)
}
.tag-build
{
    bottom:20px;
    right:0;
    color:#c2b7ff
}
.scroll-cue
{
    position:absolute;
    bottom:30px;
    left:0;
    color:#667282;
    font-size:9px;
    display:flex;
    align-items:center;
    gap:12px
}
.scroll-cue span
{
    height:1px;
    width:40px;
    background:var(--lime)
}
.ticker
{
    overflow:hidden;
    border-block:1px solid #ffffff12;
    background:#0e121a;
    padding:17px 0
}
.ticker-track
{
    display:flex;
    justify-content:space-around;
    align-items:center;
    gap:35px;
    white-space:nowrap;
    min-width:1100px;
    color:#9aa5b5;
    font:10px "DM Mono";
    letter-spacing:.15em
}
.ticker-track span:nth-of-type(2n)
{
    color:#d9e1ed
}
.ticker-track
{
    animation:marquee 35s linear infinite
}
@keyframes marquee
{
    to
    {
        transform:translateX(-15%)
    }
}
.section
{
    padding-top:125px;
    padding-bottom:65px
}
.section-kicker
{
    color:var(--lime);
    margin-bottom:30px
}
.about-grid
{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8%
}
.section h2,.contact-section h2
{
    font-size:clamp(36px,4.6vw,58px);
    line-height:1.1;
    letter-spacing:-.065em;
    margin:0;
    font-weight:800
}
.muted
{
    color:#788394
}
.about-text
{
    padding-top:5px
}
.large-copy
{
    font-size:20px;
    line-height:1.65;
    color:#e2e8f0;
    margin:0 0 22px
}
.about-text>p:not(.large-copy)
{
    font-size:13px;
    line-height:1.9;
    color:#929eae
}
.about-facts
{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-top:35px;
    border-top:1px solid var(--line);
    padding-top:22px
}
.about-facts div
{
    display:flex;
    flex-direction:column;
    gap:10px
}
.about-facts b
{
    font:12px "DM Mono";
    color:var(--lime)
}
.about-facts span
{
    font-size:10px;
    line-height:1.6;
    color:#9ba6b5
}
.section-heading
{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:40px
}
.section-heading>p
{
    max-width:300px;
    color:#929eae;
    font-size:12px;
    line-height:1.8
}
.filters
{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:34px 0 22px
}
.filter
{
    background:transparent;
    border:1px solid #2a3442;
    border-radius:4px;
    padding:10px 14px;
    color:#9aa5b4;
    font:10px "DM Mono";
    cursor:pointer
}
.filter span
{
    color:var(--lime);
    margin-left:7px
}
.filter.active,.filter:hover
{
    background:#c7f36b;
    color:#10160a;
    border-color:#c7f36b
}
.filter.active span
{
    color:#10160a
}
.project-grid
{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px
}
.project-card
{
    background:var(--panel);
    border:1px solid #ffffff12;
    border-radius:9px;
    overflow:hidden;
    transition:.25s
}
.project-card:hover
{
    transform:translateY(-5px);
    border-color:#a5c66c70;
    box-shadow:0 18px 50px #0005
}
.project-card[hidden]
{
    display:none
}
.project-card.featured
{
    grid-column:span 2
}
.project-art
{
    height:190px;
    position:relative;
    overflow:hidden;
    background:#151e2b;
    padding:16px;
    display:flex;
    flex-direction:column;
    justify-content:space-between
}
.art-label,.art-foot
{
    font-size:8px;
    color:#a7b3c4;
    z-index:2
}
.art-foot
{
    color:#8492a4
}
.project-info
{
    padding:19px 20px 22px
}
.project-type
{
    font-size:8px;
    color:var(--lime)
}
.project-info h3
{
    font-size:17px;
    letter-spacing:-.04em;
    margin:9px 0
}
.project-info p
{
    font-size:11px;
    line-height:1.8;
    color:#9aa5b4;
    min-height:60px;
    margin:0
}
.tags
{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    margin-top:16px
}
.tags span
{
    font:8px "DM Mono";
    color:#a8b3c1;
    border:1px solid #2c3644;
    padding:5px 7px;
    border-radius:3px
}
.art-agri
{
    background:radial-gradient(ellipse at 50% 70%,#42664d,#172b29 45%,#111923)
}
.field-lines
{
    position:absolute;
    inset:45px 0 25px;
    background:repeating-linear-gradient(165deg,transparent 0 13px,#b6e89b20 14px 15px);
    transform:scale(1.4)
}
.art-center
{
    position:absolute;
    top:45%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:47px;
    font-weight:800;
    letter-spacing:-.08em;
    color:#efffe5
}
.art-center span
{
    color:var(--lime)
}
.art-hospital
{
    background:radial-gradient(circle at 70% 25%,#284d61,#121e2b 65%)
}
.hospital-ui
{
    width:170px;
    height:120px;
    align-self:center;
    background:#0c1722;
    border:1px solid #6da6b755;
    border-radius:7px;
    padding:13px;
    box-shadow:0 12px 40px #0008
}
.ui-bar
{
    height:8px;
    width:60%;
    background:#79c8c2;
    border-radius:2px;
    margin-bottom:13px
}
.ui-row
{
    display:flex;
    gap:7px
}
.ui-row i
{
    height:20px;
    flex:1;
    background:#294b5b;
    border-radius:3px
}
.ui-chart
{
    height:38px;
    margin:9px 0;
    background:linear-gradient(160deg,transparent 48%,#77d8cb 49%,transparent 52%),linear-gradient(20deg,transparent 60%,#8a9aff 61%,transparent 64%);
    border-bottom:1px solid #315367
}
.ui-row.short
{
    width:70%
}
.ui-row.short i
{
    height:8px
}
.art-datav
{
    background:radial-gradient(circle at 50% 40%,#3c3b70,#171a2d 68%)
}
.data-stack
{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    margin:auto
}
.data-stack b,.data-stack strong
{
    font:10px "DM Mono";
    padding:12px 9px;
    background:#20284a;
    border:1px solid #7375a9;
    border-radius:4px
}
.data-stack span
{
    font-size:22px;
    color:var(--lime)
}
.data-stack strong
{
    background:#b9ed74;
    color:#111
}
.art-medvoice
{
    background:radial-gradient(circle at center,#28585b,#14242d 70%)
}
.voice-wave
{
    height:90px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px
}
.voice-wave i
{
    width:5px;
    border-radius:9px;
    background:#83ded2;
    height:20px
}
.voice-wave i:nth-child(2n)
{
    height:48px
}
.voice-wave i:nth-child(3n)
{
    height:72px
}
.voice-wave i:nth-child(4n)
{
    height:34px
}
.art-mom
{
    background:radial-gradient(circle at 70% 20%,#57427a,#201d38 70%)
}
.doc-graphic
{
    width:125px;
    height:120px;
    align-self:center;
    background:#f0edff;
    color:#302747;
    border-radius:5px;
    padding:14px;
    transform:rotate(-4deg);
    box-shadow:10px 15px 35px #0006
}
.doc-graphic b
{
    font-size:14px;
    line-height:1.1
}
.doc-wave
{
    height:15px;
    background:repeating-linear-gradient(90deg,#9588c8 0 2px,transparent 2px 5px);
    margin-bottom:10px
}
.doc-lines
{
    height:22px;
    margin:6px 0;
    background:repeating-linear-gradient(#b5afd1 0 1px,transparent 1px 7px)
}
.art-study
{
    background:radial-gradient(circle at 50% 50%,#465b82,#1a2238 70%)
}
.mindmap
{
    position:relative;
    align-self:center;
    width:180px;
    height:110px;
    display:grid;
    place-items:center
}
.mindmap b
{
    background:#c7f36b;
    color:#111;
    padding:10px 15px;
    border-radius:20px;
    font:10px "DM Mono";
    z-index:2
}
.mindmap span
{
    position:absolute;
    background:#2e4662;
    border:1px solid #86a7c6;
    padding:7px 10px;
    border-radius:4px;
    font:8px "DM Mono"
}
.mindmap span:nth-of-type(1)
{
    top:0;
    left:0
}
.mindmap span:nth-of-type(2)
{
    top:4px;
    right:0
}
.mindmap span:nth-of-type(3)
{
    bottom:0;
    left:36%
}
.mindmap i
{
    position:absolute;
    width:120px;
    height:65px;
    border:1px solid #8ba8d0;
    border-radius:50%
}
.art-pekka
{
    background:radial-gradient(circle at 50% 50%,#4a416e,#141a2b 70%)
}
.planet
{
    width:75px;
    height:75px;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%,#c4b3ff,#544c8d 60%,#191a36);
    align-self:center;
    box-shadow:0 0 45px #a99aff55
}
.orbit-line
{
    position:absolute;
    width:210px;
    height:75px;
    border:1px solid #b4a8f6;
    border-radius:50%;
    top:55px;
    left:50%;
    transform:translateX(-50%) rotate(-20deg)
}
.art-resume
{
    background:radial-gradient(circle at 50% 30%,#53617b,#192331)
}
.resume-sheet
{
    width:110px;
    height:125px;
    background:#e6edf3;
    color:#172230;
    align-self:center;
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:8px;
    transform:rotate(4deg)
}
.resume-sheet b
{
    font:10px "DM Mono"
}
.resume-sheet i
{
    height:5px;
    background:#aab8c7
}
.resume-sheet strong
{
    font:8px "DM Mono";
    color:#547c64
}
.art-health
{
    background:radial-gradient(circle at center,#2b615c,#142c30)
}
.health-orbit
{
    align-self:center;
    font-size:55px;
    color:#a9e9c2
}
.health-orbit span
{
    font:10px "DM Mono";
    display:block;
    text-align:center
}
.art-drip
{
    background:radial-gradient(circle at 50% 30%,#3c6975,#152b38)
}
.drip-device
{
    align-self:center;
    display:flex;
    align-items:center;
    gap:20px;
    height:115px
}
.drip-bag
{
    height:83px;
    width:47px;
    border:2px solid #a4d7df;
    border-radius:9px 9px 15px 15px;
    background:linear-gradient(#a5e6e455 25%,transparent 25%);
    position:relative
}
.drip-line
{
    height:65px;
    width:2px;
    background:#9adbd9
}
.drip-screen
{
    background:#101b27;
    border:1px solid #91d7d2;
    padding:12px;
    color:#c7f36b;
    font:15px "DM Mono"
}
.art-evsm
{
    background:radial-gradient(circle at 50% 60%,#6b4a38,#211d20 70%)
}
.car-shape
{
    width:160px;
    height:45px;
    background:#d68d62;
    border-radius:35px 45px 12px 12px;
    align-self:center;
    position:relative;
    margin-top:30px
}
.car-shape:before,.car-shape:after
{
    content:"";
    position:absolute;
    bottom:-10px;
    width:25px;
    height:25px;
    background:#111;
    border:4px solid #88929b;
    border-radius:50%
}
.car-shape:before
{
    left:20px
}
.car-shape:after
{
    right:20px
}
.car-shape div
{
    position:absolute;
    top:-25px;
    left:45px;
    width:70px;
    height:30px;
    background:#d68d62;
    border-radius:35px 35px 0 0
}
.lock-symbol
{
    position:absolute;
    right:20%;
    top:35%;
    font-size:40px;
    color:#f3c08b
}
.art-ev
{
    background:radial-gradient(circle at 50% 50%,#47675c,#142520)
}
.battery-pair
{
    align-self:center;
    display:flex;
    gap:20px
}
.battery-pair span
{
    border:2px solid #a4e6b0;
    border-radius:6px;
    padding:20px 17px;
    color:#c7f36b;
    font:17px "DM Mono";
    box-shadow:0 0 25px #86dc9b33
}
.art-speech
{
    background:radial-gradient(circle at 50% 50%,#3c5c7a,#172435)
}
.speech-icon
{
    align-self:center;
    font-size:90px;
    color:#a9d9ff
}
.art-gserds
{
    background:radial-gradient(circle at 50% 40%,#6b5341,#29202a)
}
.web-window
{
    align-self:center;
    background:#f4eee6;
    color:#29232b;
    width:190px;
    height:105px;
    padding:12px;
    border-radius:4px;
    font:8px "DM Mono"
}
.web-window b
{
    font-size:16px
}
.web-window div
{
    font-size:7px;
    margin:10px 0
}
.web-window i
{
    display:inline-block;
    width:44%;
    height:18px;
    background:#d9c9b8;
    margin-right:4px
}
.art-rc
{
    background:radial-gradient(circle at 50% 50%,#53637b,#1b2432)
}
.rc-car
{
    align-self:center;
    font-size:65px;
    color:#c7f36b
}
.bluetooth
{
    position:absolute;
    right:25%;
    top:35%;
    font-size:34px;
    color:#9ddaff
}
.art-misc
{
    background:radial-gradient(circle at center,#55507e,#1d2033)
}
.iris
{
    align-self:center;
    font-size:90px;
    color:#c8c1ff;
    text-shadow:0 0 35px #a99aff
}
.art-vms
{
    background:radial-gradient(circle at 50% 50%,#345b64,#15232c)
}
.visitor-pass
{
    align-self:center;
    background:#e9f2ed;
    color:#183b39;
    width:120px;
    height:125px;
    padding:15px;
    text-align:center;
    font:10px "DM Mono";
    transform:rotate(-4deg)
}
.visitor-pass b
{
    font-size:24px;
    display:block
}
.visitor-pass span
{
    display:block;
    margin-top:17px;
    color:#4d806d
}
.art-invoice
{
    background:radial-gradient(circle at 50% 50%,#5b5141,#24232a)
}
.invoice-paper
{
    align-self:center;
    width:130px;
    height:130px;
    background:#f1eee5;
    color:#26272a;
    padding:13px;
    display:flex;
    flex-direction:column;
    gap:9px;
    transform:rotate(3deg)
}
.invoice-paper b
{
    font:12px "DM Mono"
}
.invoice-paper span,.invoice-paper strong
{
    font:8px "DM Mono"
}
.invoice-paper i
{
    height:4px;
    background:#c4c4ba
}
.invoice-paper strong
{
    color:#4b8663
}
.art-ngat
{
    background:radial-gradient(circle at 50% 50%,#384d66,#151d2c)
}
.ngat-word
{
    align-self:center;
    font-size:55px;
    font-weight:800;
    letter-spacing:-.1em
}
.ngat-word span
{
    color:var(--lime)
}
.art-team
{
    background:radial-gradient(circle at 50% 50%,#5a466e,#211c31)
}
.team-nodes
{
    align-self:center;
    position:relative;
    width:140px;
    height:110px;
    display:grid;
    place-items:center
}
.team-nodes b
{
    font-size:25px;
    color:#c7f36b
}
.team-nodes i
{
    position:absolute;
    width:23px;
    height:23px;
    border-radius:50%;
    background:#a99aff;
    box-shadow:0 0 0 9px #a99aff22
}
.team-nodes i:nth-child(1)
{
    top:0;
    left:20px
}
.team-nodes i:nth-child(2)
{
    top:10px;
    right:10px;
    background:#80d9d1
}
.team-nodes i:nth-child(3)
{
    bottom:0;
    left:25px;
    background:#c7f36b
}
.team-nodes i:nth-child(4)
{
    bottom:5px;
    right:20px
}
.art-agents
{
    background:radial-gradient(circle at 50% 50%,#3d5866,#17232d)
}
.agent-orbit
{
    align-self:center;
    width:110px;
    height:110px;
    border:1px solid #7ed6ca;
    border-radius:50%;
    display:grid;
    place-items:center;
    position:relative
}
.agent-orbit b
{
    color:#c7f36b;
    font:20px "DM Mono"
}
.agent-orbit i
{
    position:absolute;
    width:13px;
    height:13px;
    border-radius:50%;
    background:#80d9d1
}
.agent-orbit i:nth-of-type(1)
{
    top:-6px
}
.agent-orbit i:nth-of-type(2)
{
    right:-6px;
    bottom:20px
}
.agent-orbit i:nth-of-type(3)
{
    left:-6px;
    bottom:20px
}
.project-note,.fine-print
{
    font-size:10px;
    color:#778394;
    line-height:1.8;
    margin-top:20px
}
.research-section
{
    padding-top:120px
}
.research-grid
{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:16px;
    margin-top:35px
}
.research-panel,.ip-panel
{
    background:#10151e;
    border:1px solid #ffffff12;
    border-radius:8px;
    padding:26px
}
.panel-label
{
    color:var(--lime);
    font-size:9px;
    margin-bottom:20px
}
.research-item
{
    display:grid;
    grid-template-columns:30px 1fr;
    gap:12px;
    padding:17px 0;
    border-top:1px solid #26303d
}
.research-item>span
{
    font:10px "DM Mono";
    color:#758394;
    padding-top:3px
}
.research-item h3,.ip-item h3
{
    font-size:12px;
    line-height:1.65;
    margin:0 0 6px
}
.research-item p,.ip-item p
{
    font-size:10px;
    color:#8995a5;
    margin:0;
    line-height:1.7
}
.ip-item
{
    border-top:1px solid #26303d;
    padding:15px 0
}
.ip-type
{
    font-size:8px;
    color:#a99aff;
    display:block;
    margin-bottom:7px
}
.experience-list
{
    margin-top:35px;
    border-top:1px solid var(--line)
}
.experience-row
{
    display:grid;
    grid-template-columns:150px 1fr 170px;
    gap:25px;
    align-items:start;
    padding:24px 0;
    border-bottom:1px solid var(--line)
}
.exp-date,.exp-kind
{
    font-size:8px;
    color:#8491a1;
    padding-top:4px
}
.exp-kind
{
    text-align:right
}
.experience-row h3
{
    font-size:15px;
    margin:0 0 8px
}
.experience-row h3 span
{
    color:var(--lime)
}
.experience-row p
{
    font-size:11px;
    line-height:1.8;
    color:#929eae;
    margin:0;
    max-width:650px
}
.toolkit
{
    padding-bottom:130px
}
.skill-columns
{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0 30px;
    margin-top:45px;
    border-top:1px solid var(--line)
}
.skill-columns>div
{
    padding:23px 0;
    border-bottom:1px solid var(--line)
}
.skill-columns h3
{
    font:9px "DM Mono";
    color:var(--lime);
    letter-spacing:.13em
}
.skill-columns p
{
    font-size:12px;
    line-height:1.8;
    color:#aab4c2
}
.contact-section
{
    width:100%;
    padding:95px max(5vw,24px);
    background:linear-gradient(120deg,#131b25,#11131d 65%,#1a1830);
    border-top:1px solid #ffffff12
}
.contact-section>.section-kicker,.contact-grid
{
    max-width:1160px;
    margin-left:auto;
    margin-right:auto
}
.contact-grid
{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10%;
    align-items:center
}
.contact-grid p
{
    max-width:440px;
    color:#9ca8b8;
    font-size:12px;
    line-height:1.9;
    margin-top:22px
}
.contact-links
{
    border-top:1px solid #35404f
}
.contact-links a
{
    display:grid;
    grid-template-columns:80px 1fr 20px;
    align-items:center;
    gap:15px;
    padding:18px 0;
    border-bottom:1px solid #35404f
}
.contact-links a span
{
    font:8px "DM Mono";
    color:#8290a2
}
.contact-links a b
{
    font-size:11px
}
.contact-links a i
{
    font-style:normal;
    color:var(--lime)
}
.footer
{
    padding:28px 5vw;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#778394;
    font:8px "DM Mono";
    letter-spacing:.1em
}
.footer .brand
{
    color:var(--text)
}
.footer>a:last-child
{
    color:#aab4c2
}
.menu-toggle
{
    cursor:pointer
}
@media(max-width:850px)
{
    .hero
    {
        grid-template-columns:1fr;
        padding-top:90px
    }
    .hero-visual
    {
        height:370px;
        margin-top:25px
    }
    .hero h1
    {
        font-size:clamp(48px,10vw,70px)
    }
    .project-grid
    {
        grid-template-columns:repeat(2,1fr)
    }
    .project-card.featured
    {
        grid-column:span 2
    }
    .section-heading
    {
        align-items:start;
        flex-direction:column;
        gap:8px
    }
    .research-grid
    {
        grid-template-columns:1fr
    }
    .about-grid
    {
        gap:35px
    }
    .experience-row
    {
        grid-template-columns:110px 1fr
    }
    .exp-kind
    {
        grid-column:2;
        text-align:left
    }
    .contact-grid
    {
        gap:35px
    }
    .nav
    {
        gap:18px
    }
}
@media(max-width:600px)
{
    .site-header
    {
        height:70px
    }
    .menu-toggle
    {
        display:block
    }
    .nav
    {
        display:none;
        position:absolute;
        top:69px;
        left:0;
        right:0;
        padding:22px 5%;
        background:#0c1018;
        border-bottom:1px solid var(--line);
        flex-direction:column;
        align-items:stretch;
        gap:18px
    }
    .nav.open
    {
        display:flex
    }
    .nav-cta
    {
        width:max-content
    }
    .hero
    {
        min-height:auto;
        padding-top:75px;
        padding-bottom:90px
    }
    .hero-lede
    {
        font-size:13px
    }
    .hero-visual
    {
        height:320px
    }
    .core-card
    {
        width:220px;
        height:245px
    }
    .core-symbol
    {
        font-size:75px
    }
    .orbit-a
    {
        width:300px
    }
    .orbit-b
    {
        height:330px
    }
    .tag-ai
    {
        right:0;
        top:25px
    }
    .tag-iot
    {
        left:0;
        bottom:60px
    }
    .tag-build
    {
        right:0;
        bottom:5px
    }
    .hero-meta
    {
        font-size:7px;
        gap:8px;
        flex-wrap:wrap
    }
    .section
    {
        padding-top:85px
    }
    .about-grid,.contact-grid
    {
        grid-template-columns:1fr
    }
    .about-facts
    {
        grid-template-columns:repeat(2,1fr);
        row-gap:20px
    }
    .project-grid
    {
        grid-template-columns:1fr
    }
    .project-card.featured
    {
        grid-column:auto
    }
    .project-art
    {
        height:185px
    }
    .research-panel,.ip-panel
    {
        padding:20px
    }
    .experience-row
    {
        grid-template-columns:1fr;
        gap:9px
    }
    .exp-kind
    {
        grid-column:1
    }
    .skill-columns
    {
        grid-template-columns:1fr 1fr;
        gap:0 18px
    }
    .contact-section
    {
        padding-top:75px;
        padding-bottom:65px
    }
    .footer
    {
        flex-wrap:wrap;
        gap:20px
    }
    .footer>span
    {
        order:3;
        width:100%
    }
    .section-heading>p
    {
        margin-top:5px
    }
}


/* Real project screenshots supplied in /asset. Keep labels legible over the imagery. */
.project-art.has-image {
    isolation: isolate;
    background: #0d131d;
}
.project-art.has-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(5, 8, 13, .52), transparent 30%, transparent 66%, rgba(5, 8, 13, .78));
}
.project-art .project-screenshot {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}
.project-art .project-screenshot[data-fit="contain"] {
    object-fit: contain;
    background: #0b1118;
}
.project-art.has-image > :not(.project-screenshot):not(.art-label):not(.art-foot) {
    display: none;
}
.project-art.has-image .art-label,
.project-art.has-image .art-foot {
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}
.core-symbol img {
    border-radius: 12px;
    object-fit: cover;
    object-position: center 42%;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 12px 35px rgba(0,0,0,.28);
}

/* ─────────────────────────────────────────────────────────────
   FUTURE LAYER — spatial atmosphere, glass surfaces and motion
   ───────────────────────────────────────────────────────────── */
:root {
  --neon-cyan: #72f4e8;
  --neon-violet: #a78bfa;
  --glass: rgba(15, 21, 33, .68);
  --glass-line: rgba(151, 226, 231, .17);
}
html { scroll-behavior: smooth; }
body { isolation: isolate; }
#space-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2;
  pointer-events: none; opacity: .52;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 78% 14%, rgba(89, 70, 180, .12), transparent 36%),
              radial-gradient(ellipse at 12% 62%, rgba(57, 190, 183, .075), transparent 34%),
              linear-gradient(180deg, rgba(7, 10, 17, .16), rgba(7, 10, 17, .64));
}
.site-header {
  background: rgba(7, 10, 17, .72); border-bottom-color: rgba(153, 231, 231, .12);
  backdrop-filter: blur(24px) saturate(145%); -webkit-backdrop-filter: blur(24px) saturate(145%);
}
.brand-mark { border-color: rgba(114, 244, 232, .42); box-shadow: inset 0 0 18px rgba(114, 244, 232, .08), 0 0 22px rgba(114, 244, 232, .06); }
.nav a { transition: color .25s ease, text-shadow .25s ease; }
.nav a:hover { color: var(--neon-cyan); text-shadow: 0 0 18px rgba(114, 244, 232, .55); }
.nav-cta, .button-ghost { background: rgba(255,255,255,.025); border-color: var(--glass-line); backdrop-filter: blur(14px); }
.button-primary { box-shadow: 0 0 26px rgba(199, 243, 107, .12); }
.hero { perspective: 1100px; }
.hero-visual { transform-style: preserve-3d; }
.core-card, .project-card, .experience-row, .ip-panel, .skill-columns > div {
  border: 1px solid rgba(157, 218, 226, .15);
  background: linear-gradient(145deg, rgba(24, 33, 49, .76), rgba(12, 17, 27, .76));
  box-shadow: 0 18px 60px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.core-card { box-shadow: 0 25px 90px rgba(0,0,0,.42), 0 0 70px rgba(114,244,232,.08), inset 0 1px rgba(255,255,255,.08); }
.orbit { border-color: rgba(114, 244, 232, .2); box-shadow: 0 0 28px rgba(114,244,232,.045); }
.float-tag { border: 1px solid rgba(114,244,232,.2); background: rgba(11,18,28,.72); backdrop-filter: blur(16px); box-shadow: 0 12px 35px rgba(0,0,0,.22); }
.ticker { border-color: rgba(114,244,232,.14); background: rgba(10,15,24,.68); backdrop-filter: blur(16px); }
.section { position: relative; }
.section-kicker { color: var(--neon-cyan); }
.project-card {
  position: relative; overflow: hidden; cursor: pointer; transform-style: preserve-3d;
  transition: border-color .35s ease, box-shadow .35s ease, background .35s ease;
}
.project-card::before {
  content: "OPEN CASE STUDY ↗"; position: absolute; z-index: 3; right: 16px; top: 15px;
  padding: 8px 10px; border: 1px solid rgba(114,244,232,.3); border-radius: 4px;
  color: var(--neon-cyan); background: rgba(5,10,17,.78); font: 9px "DM Mono", monospace;
  letter-spacing: .1em; opacity: 0; transform: translateY(-5px); transition: .3s ease;
  pointer-events: none; backdrop-filter: blur(12px);
}
.project-card:hover { border-color: rgba(114,244,232,.48); box-shadow: 0 24px 80px rgba(0,0,0,.36), 0 0 34px rgba(114,244,232,.075); }
.project-card:hover::before, .project-card:focus-visible::before { opacity: 1; transform: translateY(0); }
.project-card:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 4px; }
.project-art { overflow: hidden; }
.project-screenshot { transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .6s ease; }
.project-card:hover .project-screenshot { transform: scale(1.045); filter: saturate(1.12) contrast(1.04); }
.project-info { position: relative; z-index: 1; }
.tags span { border-color: rgba(114,244,232,.15); background: rgba(114,244,232,.035); }
.experience-row { border-radius: 12px; padding: 24px; margin-bottom: 12px; transition: border-color .3s ease, transform .3s ease; }
.experience-row:hover { border-color: rgba(114,244,232,.4); transform: translateX(5px); }
.skill-columns > div { border-radius: 12px; padding: 22px; transition: transform .3s ease, border-color .3s ease; }
.skill-columns > div:hover { transform: translateY(-5px); border-color: rgba(114,244,232,.4); }
.contact-links a { background: rgba(15,21,33,.45); border: 1px solid rgba(151,226,231,.12); border-radius: 10px; padding: 18px; transition: .3s ease; }
.contact-links a:hover { border-color: rgba(114,244,232,.4); background: rgba(20,32,45,.72); transform: translateX(5px); }
.footer { border-top-color: rgba(151,226,231,.14); }

/* Custom cursor and local illumination */
.custom-cursor { position: fixed; z-index: 120; left: -5px; top: -5px; width: 10px; height: 10px; pointer-events: none; mix-blend-mode: screen; }
.custom-cursor span { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--neon-cyan); box-shadow: 0 0 12px var(--neon-cyan), 0 0 28px rgba(114,244,232,.7); }
.cursor-glow { position: fixed; z-index: -1; width: 340px; height: 340px; border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(84,214,205,.075), transparent 68%); }
body.cursor-hover .custom-cursor span { transform: scale(2.8); background: rgba(167,139,250,.55); box-shadow: 0 0 25px rgba(167,139,250,.8); }

/* Full-viewport glass project viewer */
.project-modal[hidden] { display: none; }
.project-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: clamp(12px, 3vw, 42px); perspective: 1400px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(3,6,12,.82); backdrop-filter: blur(18px) saturate(125%); -webkit-backdrop-filter: blur(18px) saturate(125%); }
.modal-shell {
  position: relative; z-index: 1; width: min(1120px, 100%); max-height: min(86vh, 900px); overflow: auto;
  display: grid; grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr);
  border: 1px solid rgba(114,244,232,.27); border-radius: 18px;
  background: linear-gradient(135deg, rgba(15,23,35,.97), rgba(5,8,14,.98));
  box-shadow: 0 35px 120px rgba(0,0,0,.62), 0 0 70px rgba(114,244,232,.09), inset 0 1px rgba(255,255,255,.08);
  transform-origin: center center;
}
.modal-close { position: absolute; z-index: 4; top: 15px; right: 15px; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: white; background: rgba(5,9,16,.72); font-size: 27px; cursor: pointer; backdrop-filter: blur(12px); transition: .25s; }
.modal-close:hover { color: var(--neon-cyan); border-color: var(--neon-cyan); transform: rotate(90deg); }
.modal-visual { min-height: 420px; position: relative; display: grid; place-items: center; padding: 26px; background: radial-gradient(ellipse at 50% 50%, rgba(114,244,232,.12), transparent 66%), rgba(3,7,13,.42); border-right: 1px solid rgba(255,255,255,.08); }
.modal-visual img { display: block; width: 100%; max-height: 66vh; object-fit: contain; border-radius: 8px; box-shadow: 0 18px 55px rgba(0,0,0,.35); }
.modal-index { position: absolute; left: 24px; top: 20px; color: var(--neon-cyan); font: 9px "DM Mono",monospace; letter-spacing: .16em; }
.modal-content { align-self: center; padding: clamp(28px,4vw,54px); }
.modal-content h2 { margin: 13px 0 18px; font-size: clamp(28px,3.3vw,43px); line-height: 1.08; letter-spacing: -.055em; }
.modal-content > p { color: #aab5c5; font-size: 14px; line-height: 1.9; }
.modal-content .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.modal-content .tags span { padding: 7px 10px; border: 1px solid rgba(114,244,232,.18); border-radius: 4px; color: #cbd7e3; font: 10px "DM Mono",monospace; }
.modal-hint { margin-top: 42px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); color: #788798; font: 9px "DM Mono",monospace; letter-spacing: .12em; }
.modal-hint span { color: var(--neon-cyan); float: right; }
body.modal-open { overflow: hidden; }

/* Staggered reveal accent on section markers */
.motion-ready .section-kicker { animation: marker-glitch .55s steps(2,end) both; }
@keyframes marker-glitch { 0% { clip-path: inset(0 100% 0 0); text-shadow: 3px 0 var(--neon-violet); } 45% { clip-path: inset(0 0 0 0); text-shadow: -2px 0 var(--neon-cyan); } 100% { clip-path: inset(0); text-shadow: none; } }

@media (max-width: 850px) {
  .modal-shell { grid-template-columns: 1fr; max-width: 680px; }
  .modal-visual { min-height: 260px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .modal-visual img { max-height: 38vh; }
  .modal-content { padding: 28px; }
  .modal-hint { margin-top: 24px; }
}
@media (max-width: 600px) {
  #space-canvas { opacity: .26; }
  .custom-cursor, .cursor-glow { display: none; }
  .project-modal { padding: 8px; }
  .modal-shell { max-height: 92dvh; border-radius: 13px; }
  .modal-visual { min-height: 190px; padding: 18px; }
  .modal-visual img { max-height: 30vh; }
  .modal-content { padding: 23px 20px 25px; }
  .modal-content h2 { font-size: 29px; padding-right: 24px; }
  .modal-content > p { font-size: 13px; }
  .modal-close { top: 10px; right: 10px; width: 36px; height: 36px; }
  .project-card::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  #space-canvas, .custom-cursor, .cursor-glow { display: none !important; }
}


/* AM / spatial interaction layer */
#digital-fog {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1;
  pointer-events: none; opacity: .52; mix-blend-mode: screen;
}
.telemetry-underlay {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  color: rgba(117,216,208,.18); font: 10px "DM Mono",monospace; letter-spacing: .22em;
  line-height: 3.2; padding: 12vh 5vw; word-spacing: 2em; opacity: .32;
  transform: translateY(var(--telemetry-shift,0px));
}
body::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.13;
  background-image:linear-gradient(rgba(117,216,208,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(117,216,208,.12) 1px,transparent 1px);
  background-size:48px 48px; mask-image:radial-gradient(ellipse at var(--lens-x,50%) var(--lens-y,50%),transparent 0 13%,#000 62%);
}
.site-header, main, .footer { position:relative; z-index:2; }
.hero-visual .orbit, .hero-visual .float-tag { will-change:transform; }
.hero-visual .orbit { transition: border-color .3s; }
.hero-visual:has(.float-tag:hover) .orbit { border-color:rgba(117,216,208,.58); }
.button, .nav-cta, .filter { will-change:transform; transform-origin:center; }
.button span { display:inline-block; transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.button:hover span { transform:translate(4px,-3px) rotate(18deg) scale(1.2); }
body.velocity-warp #space-canvas, body.velocity-warp #digital-fog { filter: drop-shadow(2px 0 rgba(255,50,90,.42)) drop-shadow(-2px 0 rgba(0,220,255,.42)); }
body.velocity-warp main { text-shadow: .8px 0 rgba(255,40,80,.2),-.8px 0 rgba(0,220,255,.2); }
.project-grid {
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(320px, 360px);
  grid-template-columns:none; grid-template-rows:auto; gap:18px;
  overflow-x:auto; overflow-y:hidden; padding:12px 2px 28px;
  scroll-snap-type:x mandatory; overscroll-behavior-inline:contain;
  scrollbar-width:thin; scrollbar-color:rgba(117,216,208,.42) transparent;
  position:relative;
}
.project-grid::before {
  content:""; position:absolute; top:8px; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(117,216,208,.45),rgba(169,154,255,.55),transparent);
  pointer-events:none;
}
.project-card { scroll-snap-align:start; min-width:0; position:relative; }
.project-card.featured { grid-column:auto; width:auto; }
.project-card:hover { z-index:2; }
.project-card:focus-visible, .button:focus-visible, .modal-close:focus-visible { outline:2px solid var(--cyan); outline-offset:4px; }
.project-grid::-webkit-scrollbar { height:6px; }
.project-grid::-webkit-scrollbar-thumb { background:rgba(117,216,208,.35); border-radius:8px; }
.project-grid::after {
  content:""; position:absolute; left:0; right:0; bottom:9px; height:2px;
  background:linear-gradient(90deg,transparent 0 3%,var(--lime) 3% 3.4%,transparent 3.4% 100%);
  opacity:.65; pointer-events:none; animation:track-scan 4s linear infinite;
}
@keyframes track-scan { 0%{transform:translateX(-20%)} 100%{transform:translateX(20%)} }
.project-card.track-hit { animation:track-glitch .28s steps(2,end); }
@keyframes track-glitch { 0%,100%{filter:none} 30%{filter:drop-shadow(3px 0 #ff476b) drop-shadow(-3px 0 #48e8ff)} 60%{transform:translateY(-3px) skewX(-1deg)} }
.project-modal { isolation:isolate; overflow:hidden; }
.modal-backdrop { z-index:0; }
.modal-partition { position:absolute; z-index:2; left:0; width:100%; height:50%; pointer-events:none; background:linear-gradient(110deg,rgba(117,216,208,.09),rgba(4,7,14,.98) 28%,rgba(169,154,255,.12)); opacity:0; }
.modal-partition-top { top:0; border-bottom:1px solid rgba(117,216,208,.5); }
.modal-partition-bottom { bottom:0; border-top:1px solid rgba(169,154,255,.5); }
.project-modal.is-opening .modal-partition { opacity:1; }
.project-modal.is-opening .modal-partition-top { animation:partition-top .46s cubic-bezier(.16,1,.3,1) forwards; }
.project-modal.is-opening .modal-partition-bottom { animation:partition-bottom .46s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes partition-top { to { transform:translateY(-105%); opacity:0; } }
@keyframes partition-bottom { to { transform:translateY(105%); opacity:0; } }
.modal-shell { z-index:3; width:min(1240px,100%); max-height:min(91vh,1000px); grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
.modal-visual { position:sticky; top:0; align-self:start; min-height:100%; }
.modal-content { align-self:start; }
.modal-content > p { margin-bottom:20px; }
.case-study-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:24px; }
.case-block { padding:17px; border:1px solid rgba(117,216,208,.13); border-radius:9px; background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); min-width:0; }
.case-block.case-wide { grid-column:1/-1; }
.case-label { display:block; color:var(--cyan); font:8px "DM Mono",monospace; letter-spacing:.15em; margin-bottom:10px; }
.case-block h3 { font-size:13px; margin:0 0 9px; letter-spacing:-.02em; }
.case-block p,.case-block li { color:#aab5c5; font-size:11px; line-height:1.8; }
.case-block p { margin:0; }
.case-block ul { margin:0; padding-left:16px; }
.detail-stack { display:flex; flex-wrap:wrap; gap:6px; }
.detail-stack span { border:1px solid rgba(117,216,208,.2); padding:6px 8px; color:#d3e0e9; border-radius:4px; font:9px "DM Mono",monospace; }
.matrix-crosshair { position:absolute; z-index:2; inset:12px; pointer-events:none; opacity:0; border:1px solid rgba(117,216,208,.18); }
.matrix-crosshair::before,.matrix-crosshair::after { content:""; position:absolute; background:rgba(117,216,208,.42); }
.matrix-crosshair::before { width:1px; height:100%; left:50%; }
.matrix-crosshair::after { height:1px; width:100%; top:50%; }
.project-modal.is-opening .matrix-crosshair { animation:matrix-assemble .8s ease-out forwards; }
@keyframes matrix-assemble { 0%{opacity:0;transform:scale(.1) rotate(12deg)} 45%{opacity:1;transform:scale(1.04) rotate(0)} 100%{opacity:.16;transform:scale(1)} }
.modal-shell.is-assembling { animation:wireframe-in .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes wireframe-in { 0%{opacity:0;clip-path:inset(48% 48% 48% 48%);filter:brightness(2) hue-rotate(90deg)} 55%{opacity:1;clip-path:inset(0);filter:brightness(1.5) hue-rotate(0)} 100%{filter:none} }
.decrypted { text-shadow:0 0 12px rgba(117,216,208,.12); }
@media (max-width:850px) {
  .project-grid { grid-auto-columns:minmax(280px,78vw); }
  .project-card.featured { width:auto; }
  .modal-shell { grid-template-columns:1fr; overflow:auto; }
  .modal-visual { position:relative; min-height:250px; border-right:0; }
  .modal-visual img { max-height:34vh; }
}
@media (max-width:600px) {
  .project-grid { grid-auto-columns:86vw; gap:12px; }
  .project-card.featured { width:auto; }
  .case-study-grid { grid-template-columns:1fr; }
  .case-block.case-wide { grid-column:auto; }
  .modal-shell { max-height:94dvh; }
  .modal-content { padding:20px; }
  #digital-fog { opacity:.22; }
  body::before { background-size:36px 36px; }
}
@media (prefers-reduced-motion:reduce) {
  .project-grid::after,.project-modal.is-opening .modal-partition-top,.project-modal.is-opening .modal-partition-bottom { animation:none!important; }
  #digital-fog { display:none; }
}

.orbit-vector { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:1; }
.vector-ring,.vector-arc { fill:none; stroke:rgba(117,216,208,.24); stroke-width:1; vector-effect:non-scaling-stroke; }
.vector-ring-a { stroke-dasharray:3 8; }
.vector-ring-b { stroke:rgba(169,154,255,.22); stroke-dasharray:1 7; }
.vector-arc { stroke:rgba(199,243,107,.42); stroke-dasharray:80 480; }
.vector-node { fill:var(--cyan); filter:drop-shadow(0 0 5px var(--cyan)); }
.vector-node-alt { fill:var(--purple); }
.button:hover { scale:1.035; box-shadow:0 0 0 5px rgba(117,216,208,.055),0 12px 36px rgba(117,216,208,.12); }
.button:hover span { transform:translate(5px,-4px) rotate(24deg) scale(1.25); }


/* HOLO-DRUM / Three.js cylindrical project archive */
#work { position:relative; min-height:230vh; }
.holodrum-stage {
  position:sticky; top:86px; height:min(78vh,820px); min-height:560px; width:100%;
  margin:22px 0 28px; overflow:hidden; isolation:isolate;
  border:1px solid rgba(104,207,200,.13); border-radius:16px;
  background:radial-gradient(ellipse at 50% 42%,#0a1119 0%,#05070b 65%,#030509 100%);
  box-shadow:inset 0 0 100px rgba(0,0,0,.68),0 24px 90px rgba(0,0,0,.32);
}
#holodrum-canvas { display:block; width:100%; height:100%; position:absolute; inset:0; z-index:1; outline:0; }
.holodrum-vignette { position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(ellipse at center,transparent 35%,rgba(2,4,8,.18) 65%,rgba(2,4,8,.92) 100%); }
.holodrum-hud { position:absolute; z-index:4; top:20px; left:22px; right:22px; display:flex; justify-content:space-between; color:rgba(139,163,177,.75); font:9px "DM Mono",monospace; letter-spacing:.17em; pointer-events:none; }
.holodrum-caption { position:absolute; z-index:4; left:50%; bottom:26px; transform:translateX(-50%); width:min(520px,80%); display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; pointer-events:none; text-shadow:0 2px 20px #000; }
.holodrum-caption-kicker { color:var(--cyan); font:9px "DM Mono",monospace; letter-spacing:.18em; }
.holodrum-caption strong { color:#f1f5fa; font-size:clamp(18px,2.2vw,28px); letter-spacing:-.045em; }
.holodrum-caption > span:last-child { color:#8291a2; font:8px "DM Mono",monospace; letter-spacing:.13em; }
.holodrum-controls { position:absolute; z-index:5; right:22px; bottom:20px; display:flex; gap:8px; }
.holodrum-controls button { width:40px; height:40px; border-radius:50%; border:1px solid rgba(104,207,200,.28); background:rgba(7,12,19,.76); color:#dce8ee; font-size:18px; cursor:pointer; backdrop-filter:blur(12px); transition:.2s; }
.holodrum-controls button:hover { color:var(--lime); border-color:var(--lime); transform:scale(1.08); }
.holodrum-progress { position:absolute; z-index:4; bottom:0; left:0; width:100%; height:2px; background:rgba(255,255,255,.06); }
.holodrum-progress span { display:block; height:100%; width:4.76%; background:linear-gradient(90deg,var(--lime),var(--cyan),var(--purple)); box-shadow:0 0 14px rgba(104,207,200,.6); }
.project-grid-accessible { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:normal!important; border:0!important; }
.project-grid-accessible .project-card { display:block!important; }
.project-grid-accessible .project-card[hidden] { display:none!important; }
#work .filters { position:relative; z-index:5; }
.holodrum-stage::before,.holodrum-stage::after { content:""; position:absolute; z-index:3; top:50%; width:13%; height:1px; background:linear-gradient(90deg,transparent,rgba(104,207,200,.22),transparent); pointer-events:none; }
.holodrum-stage::before { left:0; } .holodrum-stage::after { right:0; }
.holodrum-stage.is-fallback { display:grid; place-items:center; color:#91a1b2; font:11px "DM Mono",monospace; text-align:center; }
.toolkit .skill-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
.case-study-grid #detail-languages { border-color:rgba(183,223,96,.2); }
#detail-languages span { border-color:rgba(183,223,96,.22); color:#d7e8b7; }
@media(max-width:850px) {
  #work { min-height:205vh; }
  .holodrum-stage { top:76px; height:68vh; min-height:480px; }
  .holodrum-caption { bottom:24px; }
  .holodrum-controls { right:14px; bottom:18px; }
  .toolkit .skill-columns { grid-template-columns:1fr; }
}
@media(max-width:600px) {
  #work { min-height:190vh; }
  .holodrum-stage { top:72px; height:64vh; min-height:440px; border-radius:10px; }
  .holodrum-hud { left:12px; right:12px; top:13px; font-size:7px; }
  .holodrum-caption { width:90%; bottom:20px; gap:4px; }
  .holodrum-caption strong { font-size:16px; }
  .holodrum-caption > span:last-child { font-size:7px; }
  .holodrum-controls { bottom:12px; right:12px; }
  .holodrum-controls button { width:34px; height:34px; }
}
@media(prefers-reduced-motion:reduce) {
  .holodrum-controls button { transition:none; }
}

.skill-note { color:#718192!important; font-size:10px!important; border-top:1px solid rgba(104,207,200,.12); padding-top:10px; }


/* Gallery viewport wrapper + useful no-WebGL fallback */
.holodrum-viewport {
  position:sticky; top:86px; height:min(78vh,820px); min-height:560px;
  width:100%; margin:22px 0 28px; z-index:3;
}
.holodrum-viewport > .holodrum-stage {
  position:relative; top:auto; height:100%; min-height:0; margin:0;
}
.holodrum-viewport.is-fallback {
  position:relative; top:auto; height:auto; min-height:0; margin:22px 0 28px;
}
.holodrum-viewport.is-fallback > .holodrum-stage {
  display:grid; place-items:center; height:138px; min-height:138px; margin:0 0 14px;
  border:1px solid rgba(104,207,200,.16); border-radius:12px;
  background:radial-gradient(ellipse at 50% 0%,rgba(104,207,200,.07),transparent 65%),#070b11;
  box-shadow:inset 0 0 50px rgba(0,0,0,.5);
}
.holodrum-fallback-note { display:flex; flex-direction:column; align-items:center; gap:7px; padding:16px; text-align:center; }
.holodrum-fallback-note span { color:var(--cyan); font:8px "DM Mono",monospace; letter-spacing:.18em; }
.holodrum-fallback-note strong { color:#e7eef5; font-size:18px; letter-spacing:-.035em; }
.holodrum-fallback-note p { color:#8190a1; font-size:10px; margin:0; }
.holodrum-viewport.is-fallback > .project-grid-accessible {
  position:relative!important; inset:auto!important; width:100%!important; height:auto!important;
  padding:12px 2px 24px!important; margin:0!important; overflow-x:auto!important; overflow-y:hidden!important;
  clip:auto!important; white-space:normal!important; border:0!important;
  display:grid!important; grid-auto-flow:column!important; grid-auto-columns:minmax(300px,34%)!important;
  grid-template-columns:none!important; gap:18px!important; scroll-snap-type:x mandatory;
}
.holodrum-viewport.is-fallback .project-card { display:block!important; min-width:0; scroll-snap-align:center; }
.holodrum-viewport.is-fallback .project-card[hidden] { display:none!important; }
.holodrum-viewport.is-fallback .project-card .project-art { height:190px; }
@media(max-width:850px) {
  .holodrum-viewport { top:76px; height:68vh; min-height:470px; }
  .holodrum-viewport.is-fallback { height:auto; min-height:0; }
  .holodrum-viewport.is-fallback > .project-grid-accessible { grid-auto-columns:minmax(270px,76%)!important; }
}
@media(max-width:600px) {
  .holodrum-viewport { top:72px; height:62vh; min-height:420px; }
  .holodrum-viewport.is-fallback { height:auto; min-height:0; }
  .holodrum-viewport.is-fallback > .project-grid-accessible { grid-auto-columns:minmax(260px,86%)!important; gap:12px!important; }
  .holodrum-viewport.is-fallback > .holodrum-stage { height:130px; min-height:130px; }
}

#work:has(.holodrum-viewport.is-fallback) { min-height:0; }