:root{
    --paper:#f4f1e8;
    --ink:#11151a;
    --muted:#687078;
    --line:#b8bdba;
    --blue:#153cff;
    --cyan:#00d8d6;
    --violet:#7856ff;
    --phosphor:#79ff9f;
    --panel:#ebe8df;
    --dark:#0b0f14;
}

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

html{
    scroll-behavior:smooth;
    background:var(--paper);
}

body{
    font-family:"Courier New", Courier, monospace;
    background:
        linear-gradient(rgba(17,21,26,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17,21,26,.025) 1px, transparent 1px),
        var(--paper);
    background-size:24px 24px;
    color:var(--ink);
    line-height:1.55;
    overflow-x:hidden;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:9999;
    opacity:.22;
    background:repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 3px,
        rgba(0,0,0,.028) 4px
    );
    mix-blend-mode:multiply;
}

a{
    color:inherit;
}

::selection{
    background:var(--phosphor);
    color:#07110b;
}

header{
    min-height:76px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:28px;
    padding:0 6vw;
    background:rgba(244,241,232,.94);
    border-bottom:1px solid var(--ink);
    position:sticky;
    top:0;
    z-index:1000;
    backdrop-filter:blur(10px);
    transition:min-height .2s ease, background .2s ease;
}

header::after{
    content:"";
    position:absolute;
    left:6vw;
    right:6vw;
    bottom:-1px;
    height:1px;
    background:linear-gradient(90deg,var(--blue),var(--cyan),var(--violet),transparent 72%);
    transform:scaleX(.22);
    transform-origin:left;
    transition:transform .35s ease;
}

.header-scroll::after{
    transform:scaleX(1);
}

.logo{
    position:relative;
    text-decoration:none;
    font-size:22px;
    font-weight:700;
    letter-spacing:-1px;
    color:var(--ink);
}

.logo::before{
    content:"[";
    color:var(--blue);
    margin-right:3px;
}

.logo::after{
    content:"]";
    color:var(--blue);
    margin-left:3px;
}

.logo span{
    color:var(--violet);
}

nav{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

nav a{
    text-decoration:none;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
    padding:8px 10px;
    border:1px solid transparent;
    transition:background .18s ease, border-color .18s ease, transform .18s ease;
}

nav a::before{
    content:"// ";
    color:var(--muted);
}

nav a:hover{
    border-color:var(--ink);
    background:var(--phosphor);
    transform:translateY(-2px);
}

.hero{
    min-height:650px;
    padding:88px 6vw 72px;
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
    align-items:center;
    gap:7vw;
    border-bottom:1px solid var(--ink);
    position:relative;
    overflow:hidden;
}

.hero::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    right:-180px;
    top:-160px;
    border:1px solid rgba(21,60,255,.28);
    border-radius:50%;
    box-shadow:
        0 0 0 42px rgba(0,216,214,.045),
        0 0 0 84px rgba(120,86,255,.035);
}

.hero::after{
    content:"HTTP://INFO.CERN.CH";
    position:absolute;
    right:6vw;
    bottom:22px;
    font-size:10px;
    letter-spacing:.16em;
    color:var(--muted);
}

.hero-label{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:30px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.16em;
    color:var(--blue);
}

.hero-label::before{
    content:"";
    width:32px;
    height:8px;
    border:1px solid var(--ink);
    background:linear-gradient(90deg,var(--phosphor) 0 35%,transparent 35% 50%,var(--cyan) 50% 75%,transparent 75%);
}

.hero h1{
    max-width:900px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:clamp(66px,9vw,132px);
    font-weight:900;
    line-height:.8;
    letter-spacing:-.07em;
    color:var(--ink);
    margin-bottom:38px;
    position:relative;
    z-index:1;
}

.hero h1::after{
    content:"";
    display:block;
    width:min(420px,65%);
    height:9px;
    margin-top:24px;
    background:linear-gradient(90deg,var(--blue),var(--cyan),var(--violet));
    box-shadow:10px 10px 0 var(--ink);
}

.hero-description{
    max-width:720px;
    font-size:17px;
    line-height:1.7;
    color:#343a40;
}

.hero-description a{
    color:var(--blue);
    text-decoration:none;
    border-bottom:1px dashed currentColor;
}

.hero-description a:hover{
    color:var(--violet);
    background:rgba(121,255,159,.45);
}

.hero-visual{
    display:flex;
    justify-content:center;
    align-items:center;
    perspective:900px;
}

.web-box{
    width:min(30vw,340px);
    aspect-ratio:1;
    min-width:280px;
    background:rgba(255,255,255,.26);
    border:1px solid var(--ink);
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    box-shadow:
        14px 14px 0 rgba(21,60,255,.13),
        -12px -12px 0 rgba(0,216,214,.08);
    transition:transform .15s ease, box-shadow .25s ease;
    transform-style:preserve-3d;
}

.web-box:hover{
    box-shadow:
        20px 20px 0 rgba(21,60,255,.18),
        -14px -14px 0 rgba(0,216,214,.12);
}

.web-box span{
    font-family:Arial, Helvetica, sans-serif;
    font-size:76px;
    font-weight:900;
    letter-spacing:-.08em;
    color:var(--ink);
    z-index:3;
    text-shadow:3px 3px 0 var(--phosphor);
}

.web-box::before{
    content:"";
    position:absolute;
    width:68%;
    height:68%;
    border:1px dashed var(--blue);
    border-radius:50%;
    animation:webRotate 18s linear infinite;
}

.web-box::after{
    content:"";
    position:absolute;
    width:42%;
    height:86%;
    border-left:1px solid var(--cyan);
    border-right:1px solid var(--violet);
    border-radius:50%;
    animation:webRotateReverse 14s linear infinite;
}

.node{
    width:9px;
    height:9px;
    position:absolute;
    background:var(--phosphor);
    border:1px solid var(--ink);
    z-index:4;
    box-shadow:0 0 0 4px rgba(121,255,159,.2);
}

.node-1{top:14%;left:28%;animation:nodeMove 4s ease-in-out infinite;}
.node-2{top:28%;right:14%;animation:nodeMove 5s ease-in-out infinite;}
.node-3{bottom:20%;left:15%;animation:nodeMove 4.5s ease-in-out infinite;}
.node-4{bottom:12%;right:31%;animation:nodeMove 5.5s ease-in-out infinite;}

@keyframes webRotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes webRotateReverse{from{transform:rotate(360deg)}to{transform:rotate(0)}}
@keyframes nodeMove{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.quick-links{
    padding:18px 6vw;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    border-bottom:1px solid var(--ink);
    background:#dedbd3;
}

.quick-links a{
    text-decoration:none;
    padding:9px 12px;
    border:1px solid var(--ink);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.05em;
    background:var(--paper);
    transition:transform .16s ease, background .16s ease, color .16s ease;
}

.quick-links a::before{
    content:"↗ ";
    color:var(--blue);
}

.quick-links a:hover{
    background:var(--ink);
    color:var(--phosphor);
    transform:translate(-2px,-2px);
    box-shadow:3px 3px 0 var(--blue);
}

.content{
    padding:100px 6vw 120px;
}

.section-header{
    max-width:820px;
    margin-bottom:56px;
    display:grid;
    grid-template-columns:160px 1fr;
    gap:24px;
    align-items:start;
}

.section-header small{
    color:var(--blue);
    font-size:10px;
    font-weight:700;
    letter-spacing:.15em;
    padding-top:9px;
}

.section-header h2{
    font-family:Arial, Helvetica, sans-serif;
    font-size:clamp(42px,5vw,70px);
    line-height:.96;
    letter-spacing:-.05em;
    color:var(--ink);
}

.information-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    border-top:1px solid var(--ink);
    border-left:1px solid var(--ink);
}

.info-item{
    min-height:240px;
    padding:28px;
    background:rgba(244,241,232,.78);
    border-right:1px solid var(--ink);
    border-bottom:1px solid var(--ink);
    position:relative;
    overflow:hidden;
    transition:background .2s ease, transform .2s ease;
}

.info-item:nth-child(3n+1)::before{background:var(--phosphor);}
.info-item:nth-child(3n+2)::before{background:var(--cyan);}
.info-item:nth-child(3n+3)::before{background:var(--violet);}

.info-item::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:6px;
    height:100%;
    transform:scaleY(0);
    transform-origin:bottom;
    transition:transform .22s ease;
}

.info-item:hover{
    background:#fffef8;
    z-index:2;
}

.info-item:hover::before{
    transform:scaleY(1);
}

.info-item::after{
    content:"OPEN ↗";
    position:absolute;
    right:22px;
    top:22px;
    font-size:9px;
    letter-spacing:.12em;
    color:var(--muted);
    opacity:0;
    transform:translateY(5px);
    transition:.18s ease;
}

.info-item:hover::after{
    opacity:1;
    transform:translateY(0);
}

.info-number{
    margin-bottom:42px;
    font-size:11px;
    font-weight:700;
    color:var(--muted);
}

.info-number::before{
    content:"NODE ";
    color:var(--blue);
}

.info-item h3{
    margin-bottom:14px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:28px;
    letter-spacing:-.035em;
    color:var(--ink);
}

.info-item h3 a{
    text-decoration:none;
}

.info-item h3 a:hover{
    text-decoration:underline;
    text-decoration-color:var(--blue);
    text-decoration-thickness:2px;
    text-underline-offset:5px;
}

.info-item p{
    max-width:560px;
    font-size:13px;
    color:#4f565e;
}

.info-item p a{
    color:var(--blue);
    text-decoration:none;
    border-bottom:1px dashed currentColor;
}

.software{
    margin-top:110px;
    padding:0;
    background:var(--dark);
    color:#f6f3e9;
    border:1px solid var(--ink);
    box-shadow:14px 14px 0 var(--violet);
    overflow:hidden;
}

.software > h2,
.software > p{
    padding-left:32px;
    padding-right:32px;
}

.software h2{
    padding-top:34px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:clamp(38px,4vw,58px);
    line-height:1;
    letter-spacing:-.045em;
    margin-bottom:12px;
}

.software > p{
    color:#aeb8b2;
    margin-bottom:32px;
    font-size:13px;
}

.software-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid #414a52;
}

.software-grid a{
    min-height:130px;
    padding:18px;
    display:flex;
    align-items:flex-end;
    text-decoration:none;
    border-right:1px solid #414a52;
    border-bottom:1px solid #414a52;
    font-size:13px;
    position:relative;
    transition:background .2s ease,color .2s ease;
}

.software-grid a::before{
    content:"/SYS/";
    position:absolute;
    top:15px;
    left:18px;
    font-size:9px;
    color:#687078;
    letter-spacing:.12em;
}

.software-grid a:hover{
    background:var(--phosphor);
    color:#07110b;
}

.reveal{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .55s ease,transform .55s ease;
}

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

footer{
    padding:34px 6vw;
    display:flex;
    justify-content:space-between;
    gap:20px;
    background:var(--paper);
    border-top:1px solid var(--ink);
    color:var(--muted);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.07em;
}

footer strong{
    color:var(--ink);
}

footer div:last-child{
    color:var(--blue);
}

@media (max-width:900px){
    .hero{
        grid-template-columns:1fr;
        gap:60px;
    }
    .hero-visual{
        justify-content:flex-start;
    }
    .web-box{
        width:300px;
        min-width:0;
    }
    .software-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:650px){
    header{
        padding:0 5%;
    }
    nav{
        display:none;
    }
    .hero,.content{
        padding-left:5%;
        padding-right:5%;
    }
    .hero{
        min-height:auto;
        padding-top:72px;
    }
    .hero h1{
        font-size:58px;
    }
    .hero-visual{
        display:flex;
    }
    .web-box{
        width:240px;
    }
    .section-header{
        grid-template-columns:1fr;
        gap:8px;
    }
    .information-grid{
        grid-template-columns:1fr;
    }
    .software{
        box-shadow:8px 8px 0 var(--violet);
    }
    .software-grid{
        grid-template-columns:1fr;
    }
    footer{
        flex-direction:column;
    }
}

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


/* --- v2: living-network layer --- */

#network-bg{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:-1;
    pointer-events:none;
    opacity:.42;
}

.system-hud{
    position:fixed;
    left:18px;
    bottom:18px;
    z-index:900;
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:9px;
    line-height:1;
    letter-spacing:.12em;
    color:var(--muted);
    text-transform:uppercase;
    pointer-events:none;
    mix-blend-mode:multiply;
}

.system-hud span:first-child::before{
    content:"● ";
    color:var(--phosphor);
}

.scroll-progress{
    position:absolute;
    left:0;
    right:0;
    bottom:-2px;
    height:2px;
    background:transparent;
    overflow:hidden;
}

.scroll-progress span{
    display:block;
    width:100%;
    height:100%;
    transform:scaleX(0);
    transform-origin:left center;
    background:linear-gradient(90deg,var(--blue),var(--cyan),var(--violet),var(--phosphor));
    box-shadow:0 0 8px rgba(0,216,214,.4);
}


@media (pointer: fine){
    body.cursor-grid,
    body.cursor-grid a,
    body.cursor-grid button{
        cursor:none;
    }
}

#retro-cursor,
#retro-cursor-ring{
    position:fixed;
    left:0;
    top:0;
    pointer-events:none;
    z-index:10000;
    opacity:0;
    transform:translate(-50%,-50%);
}

#retro-cursor{
    width:8px;
    height:8px;
    background:var(--phosphor);
    border:1px solid var(--ink);
    box-shadow:
        4px 0 0 rgba(21,60,255,.85),
        0 4px 0 rgba(0,216,214,.75);
}

#retro-cursor-ring{
    width:26px;
    height:26px;
    border:1px solid rgba(17,21,26,.65);
    box-shadow:
        inset 0 0 0 1px rgba(244,241,232,.65),
        0 0 0 1px rgba(120,86,255,.18);
    transition:
        width .14s ease,
        height .14s ease,
        border-color .14s ease,
        background .14s ease;
}

body.cursor-active #retro-cursor,
body.cursor-active #retro-cursor-ring{
    opacity:1;
}

body.cursor-hover #retro-cursor{
    background:var(--cyan);
    box-shadow:
        4px 0 0 var(--violet),
        0 4px 0 var(--phosphor);
}

body.cursor-hover #retro-cursor-ring{
    width:34px;
    height:34px;
    border-color:var(--blue);
    background:rgba(121,255,159,.06);
}

@media (max-width:650px), (pointer: coarse){
    #retro-cursor,
    #retro-cursor-ring{
        display:none !important;
    }
    body.cursor-grid,
    body.cursor-grid a,
    body.cursor-grid button{
        cursor:auto;
    }
}


a{
    position:relative;
}

nav a:hover::after,
.quick-links a:hover::after{
    content:"GET";
    position:absolute;
    right:6px;
    top:-12px;
    font-size:8px;
    letter-spacing:.08em;
    color:var(--violet);
    background:var(--paper);
    border:1px solid var(--ink);
    padding:2px 4px;
}

.info-item:nth-child(4n+1):hover{
    transform:translate(-3px,-3px);
    box-shadow:5px 5px 0 var(--blue);
}

.info-item:nth-child(4n+2):hover{
    transform:translateY(-3px);
    box-shadow:0 5px 0 var(--cyan);
}

.info-item:nth-child(4n+3):hover{
    transform:translate(3px,-2px);
    box-shadow:-5px 5px 0 var(--violet);
}

.info-item:nth-child(4n):hover{
    transform:translateY(-2px);
    box-shadow:inset 0 -7px 0 rgba(121,255,159,.35);
}

.info-item h3 a:hover::after{
    content:" ↗";
    color:var(--violet);
    font-family:"Courier New",monospace;
    font-size:.62em;
    vertical-align:middle;
}

.section-header{
    position:relative;
}

.section-header::after{
    content:"";
    position:absolute;
    left:184px;
    right:0;
    bottom:-14px;
    height:1px;
    background:linear-gradient(90deg,var(--ink),transparent 65%);
    transform:scaleX(.25);
    transform-origin:left;
    transition:transform .45s ease;
}

.section-header.visible::after{
    transform:scaleX(1);
}

.web-box{
    opacity:0;
    transform:scale(.82) rotate(-5deg);
}

.web-box.web-assembled{
    opacity:1;
    transform:scale(1) rotate(0);
    transition:
        opacity .55s ease,
        transform .75s cubic-bezier(.2,.8,.2,1),
        box-shadow .25s ease;
}

.web-box.web-assembled::before{
    animation:webAssembleRing .9s ease both, webRotate 18s linear .9s infinite;
}

.web-box.web-assembled::after{
    animation:webAssembleCore .9s ease both, webRotateReverse 14s linear .9s infinite;
}

.web-box.web-assembled .node{
    animation:
        nodeAppear .55s ease both,
        nodeMove 4.5s ease-in-out .7s infinite;
}

.web-box.web-assembled .node-2{ animation-delay:.16s,.9s; }
.web-box.web-assembled .node-3{ animation-delay:.26s,1s; }
.web-box.web-assembled .node-4{ animation-delay:.36s,1.1s; }

@keyframes webAssembleRing{
    from{transform:scale(.2) rotate(-120deg);opacity:0}
    to{transform:scale(1) rotate(0);opacity:1}
}

@keyframes webAssembleCore{
    from{transform:scaleY(.1) rotate(120deg);opacity:0}
    to{transform:scaleY(1) rotate(0);opacity:1}
}

@keyframes nodeAppear{
    from{opacity:0;filter:blur(4px);transform:scale(0)}
    to{opacity:1;filter:blur(0);transform:scale(1)}
}

.hero-label{
    position:relative;
    overflow:hidden;
}

.hero-label::after{
    content:"";
    position:absolute;
    left:-120%;
    top:0;
    width:45%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
    transform:skewX(-22deg);
    animation:labelScan 5.5s ease-in-out infinite;
}

@keyframes labelScan{
    0%,72%{left:-120%}
    90%,100%{left:150%}
}

.software-grid a:hover::after{
    content:"ACTIVE";
    position:absolute;
    right:14px;
    top:14px;
    font-size:8px;
    letter-spacing:.1em;
    color:#07110b;
}

@media (max-width:650px){
    .system-hud{display:none;}
    #network-bg{opacity:.25;}
}

@media (prefers-reduced-motion:reduce){
    #network-bg{display:none;}
    .web-box{
        opacity:1;
        transform:none;
    }
}


.footer-credit{
    flex-basis:100%;
    padding-top:14px;
    margin-top:6px;
    border-top:1px dashed rgba(17,21,26,.28);
    color:var(--ink);
    font-size:10px;
    letter-spacing:.08em;
    text-transform:none;
}

.footer-credit::before{
    content:"// ";
    color:var(--violet);
}