:root {
     --bg0: #070712;
     --bg1: #090a18;
     --ink: rgba(255, 255, 255, .92);
     --muted: rgba(255, 255, 255, .68);
     --line: rgba(255, 255, 255, .12);
     --panel: rgba(255, 255, 255, .06);
     --panel2: rgba(255, 255, 255, .10);

     --cyan: #2efcff;
     --violet: #b34bff;
     --magenta: #ff2bd6;
     --mint: #2dffb3;

     --r: 18px;
     --shadow: 0 24px 80px rgba(0, 0, 0, .55);
     --max: 1120px;
 }

 * {
     box-sizing: border-box;
 }

 html,
 body {
     height: 100%;
 }

 /* body {
     margin: 0;
     font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
     color: var(--ink);
     background: radial-gradient(1200px 800px at 20% 10%, rgba(46, 252, 255, .10), transparent 55%),
         radial-gradient(900px 600px at 80% 25%, rgba(255, 43, 214, .10), transparent 60%),
         radial-gradient(900px 700px at 55% 85%, rgba(45, 255, 179, .06), transparent 60%),
         linear-gradient(180deg, var(--bg1), var(--bg0));
     overflow-x: hidden;
 } */

 body {
     margin: 0;
     background: #070712;
     font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
     color: var(--ink);
 }

 body::before {
     content: "";
     position: fixed;
     inset: 0;
     z-index: -2;
     pointer-events: none;

     background:
         radial-gradient(1200px 800px at 20% 10%, rgba(46, 252, 255, .10), transparent 55%),
         radial-gradient(900px 600px at 80% 25%, rgba(255, 43, 214, .10), transparent 60%),
         radial-gradient(900px 700px at 55% 85%, rgba(45, 255, 179, .06), transparent 60%),
         linear-gradient(180deg, #090a18, #070712);

    
     transform: translateZ(0);
     backface-visibility: hidden;
     will-change: transform;
 }

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

 a:hover {
     text-decoration: none;
 }

 /* ===== Ambient background layers ===== */
 .bg {
     position: fixed;
     inset: 0;
     z-index: -1;
     pointer-events: none;
 }

 .bg::before {
     content: "";
     position: absolute;
     inset: 0;
     opacity: .06;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
     mix-blend-mode: overlay;
 }

 .aurora {
     position: absolute;
     inset: -25%;
     filter: blur(28px);
     opacity: .9;
     background:
         radial-gradient(800px circle at 20% 25%, rgba(46, 252, 255, .35), transparent 55%),
         radial-gradient(700px circle at 80% 35%, rgba(179, 75, 255, .28), transparent 58%),
         radial-gradient(850px circle at 55% 75%, rgba(255, 43, 214, .20), transparent 60%);
     animation: auroraMove 14s ease-in-out infinite;
 }

 @keyframes auroraMove {

     0%,
     100% {
         transform: translate3d(0, 0, 0) scale(1);
     }

     50% {
         transform: translate3d(16px, -10px, 0) scale(1.02);
     }
 }

 .grid {
     position: absolute;
     inset: -35%;
     background-image:
         linear-gradient(to right, rgba(255, 255, 255, .10) 1px, transparent 1px),
         linear-gradient(to bottom, rgba(255, 255, 255, .10) 1px, transparent 1px);
     background-size: 56px 56px;
     transform: perspective(900px) rotateX(63deg) rotateZ(-8deg) translateY(-18%);
     opacity: .10;
     animation: gridDrift 12s linear infinite;
     backface-visibility: hidden;
     transform-origin: top center;
     will-change: transform;
 }

 @keyframes gridDrift {
     from {
         transform: perspective(900px) rotateX(63deg) rotateZ(-8deg) translateY(-18%) translateX(0);
     }

     to {
         transform: perspective(900px) rotateX(63deg) rotateZ(-8deg) translateY(-18%) translateX(-56px);
     }
 }

 /* ===== Top nav ===== */
 .wrap {
     width: min(var(--max), calc(100% - 2rem));
     margin: 0 auto;
 }

 header {
     position: sticky;
     top: 0;
     z-index: 20;
     backdrop-filter: blur(16px);
     background: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, .18));
     border-bottom: 1px solid var(--line);
 }

 .navrow {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: .9rem 0;
     gap: 1rem;
 }

 .brand {
     display: flex;
     align-items: center;
     gap: .7rem;
     font-weight: 900;
     letter-spacing: .3px;
 }

 .brand .mark {
     width: 42px;
     height: 42px;
     border-radius: 14px;
     display: flex;
     place-items: center;
     border: 1px solid rgba(255, 255, 255, .18);
     background: linear-gradient(135deg, rgba(46, 252, 255, .20), rgba(255, 43, 214, .12));
     box-shadow: var(--shadow);
     align-items: center;
     justify-content: center;;
 }

 .brand .mark img{
    width: 50px;
    height: auto;
 }

 .brand .name {
     display: flex;
     flex-direction: column;
     line-height: 1.1;
     font-weight: 900;
 }

 .brand .name small {
     font-weight: 700;
     color: var(--muted);
     letter-spacing: .8px;
     text-transform: uppercase;
     font-size: .68rem;
     margin-top: .12rem;
 }

 nav {
     display: flex;
     gap: .9rem;
     align-items: center;
     color: rgba(255, 255, 255, .72);
     font-size: .92rem;
 }

 nav a {
     padding: .45rem .6rem;
     border-radius: 12px;
     border: 1px solid transparent;
 }

 nav a:hover {
     color: var(--ink);
     background: rgba(255, 255, 255, .06);
     border-color: rgba(255, 255, 255, .10);
 }

 .navbtn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: .6rem .85rem;
     border-radius: 10px;
     border: 1px solid rgba(255, 255, 255, .18);
     background: rgba(179, 75, 255, .20);
     box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
     font-weight: 800;
 }

 .navbtn:hover {
     background: rgba(179, 75, 255, .28);
 }

 /* ===== Hero ===== */
 .hero {
     padding: 3rem 0 2.2rem;
 }

 .heroGrid {
     display: grid;
     grid-template-columns:.9fr 1.1fr ;
     gap: 1.2rem;
     align-items: stretch;
 }

 .left {
     padding: 1.4rem 0;
     order: 2;
     margin-left: 50px;
 }

 .pill {
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     padding: .28rem .7rem;
     border-radius: 999px;
     border: 1px solid rgba(46, 252, 255, .22);
     background: rgba(46, 252, 255, .08);
     color: rgba(255, 255, 255, .78);
     text-transform: uppercase;
     letter-spacing: .9px;
     font-weight: 800;
     font-size: .7rem;
 }

 .pill .dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: rgba(46, 252, 255, .9);
     box-shadow: 0 0 18px rgba(46, 252, 255, .55);
 }

 h1 {
     margin: .9rem 0 .7rem;
     font-size: clamp(2.4rem, 4.4vw, 3.6rem);
     line-height: 1.02;
     letter-spacing: -0.7px;
 }

 .gradA {
     background: linear-gradient(90deg, rgba(46, 252, 255, 1), rgba(179, 75, 255, 1));
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     text-shadow: 0 0 30px rgba(46, 252, 255, .14);
 }

 .gradB {
     background: linear-gradient(90deg, rgba(255, 43, 214, 1), rgba(179, 75, 255, 1));
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     text-shadow: 0 0 30px rgba(255, 43, 214, .14);
 }

 .lede {
     max-width: 60ch;
     color: var(--muted);
     margin: 0 0 1.25rem;
     font-size: 1.03rem;
 }

 .cta {
     display: flex;
     gap: .8rem;
     flex-wrap: wrap;
     margin-top: 1.2rem;
 }

 .btn {
     padding: .85rem 1rem;
     border-radius: 12px;
     border: 1px solid rgba(255, 255, 255, .18);
     background: rgba(255, 255, 255, .06);
     font-weight: 850;
     box-shadow: 0 16px 55px rgba(0, 0, 0, .35);
 }

 .btn.primary {
     background: linear-gradient(135deg, rgba(255, 43, 214, .32), rgba(46, 252, 255, .20));
     border-color: rgba(255, 255, 255, .22);
 }

 .btn:hover {
     background: rgba(255, 255, 255, .10);
 }

 .btn.primary:hover {
     background: linear-gradient(135deg, rgba(255, 43, 214, .40), rgba(46, 252, 255, .26));
 }

 /* ===== Right panel card ===== */
 .panel {
     position: relative;
     border-radius: var(--r);
     border: 1px solid rgba(46, 252, 255, .28);
     background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
     box-shadow: var(--shadow);
     overflow: hidden;
     transform-style: preserve-3d;
     transition: transform 160ms ease;
     order: 1;
 }

 /* .panel::before {
     content: "";
     position: absolute;
     inset: -2px;
     background: radial-gradient(520px circle at var(--mx, 30%) var(--my, 20%),
             rgba(46, 252, 255, .20),
             transparent 55%);
     opacity: .0;
     transition: opacity 180ms ease;
 } */

 .panel:hover::before {
     opacity: 1;
 }

 .panel:hover {
     transform: translateY(-4px);
 }

 .panelTop {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: .8rem 1rem .6rem;
     border-bottom: 1px solid rgba(255, 255, 255, .10);
 }

 .dots {
     display: flex;
     gap: .45rem;
 }

 .dots i {
     width: 9px;
     height: 9px;
     border-radius: 50%;
     display: inline-block;
     opacity: .9;
 }

 .dots i:nth-child(1) {
     background: rgba(255, 43, 214, .85);
     box-shadow: 0 0 12px rgba(255, 43, 214, .35);
 }

 .dots i:nth-child(2) {
     background: rgba(179, 75, 255, .85);
     box-shadow: 0 0 12px rgba(179, 75, 255, .35);
 }

 .dots i:nth-child(3) {
     background: rgba(46, 252, 255, .85);
     box-shadow: 0 0 12px rgba(46, 252, 255, .35);
 }

 .panelLabel {
     font-size: .78rem;
     color: rgba(255, 255, 255, .72);
     letter-spacing: .6px;
 }

 .codeArea {
     position: relative;
     padding: 1rem 1rem 3.2rem;
     min-height: 320px;
 }

 pre {
     margin: 0;
     padding: 0;
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
     font-size: .83rem;
     line-height: 1.55;
     color: rgba(255, 255, 255, .72);
     opacity: .9;
     white-space: pre-wrap;
 }

 .kw {
     color: rgba(46, 252, 255, .9);
 }

 .fn {
     color: rgba(255, 43, 214, .85);
 }

 .cm {
     color: rgba(255, 255, 255, .45);
 }

 .st {
     color: rgba(45, 255, 179, .78);
 }


 .techRow {
     position: absolute;
     left: 0;
     right: 0;
     bottom: .9rem;
     display: flex;
     justify-content: center;
     gap: .5rem;
     flex-wrap: wrap;
     padding: 0 .8rem;
 }

 .tech {
     padding: .35rem .6rem;
     border-radius: 999px;
     border: 1px solid rgba(255, 255, 255, .14);
     background: rgba(0, 0, 0, .22);
     color: rgba(255, 255, 255, .74);
     font-size: .78rem;
 }

 .tech.cyan {
     border-color: rgba(46, 252, 255, .26);
 }

 .tech.mag {
     border-color: rgba(255, 43, 214, .22);
 }

 .tech.vio {
     border-color: rgba(179, 75, 255, .22);
 }

 .tech.mint {
     border-color: rgba(45, 255, 179, .18);
 }

 /* ===== About heading band ===== */
 .band {
     padding: 2.6rem 0 1.6rem;
     text-align: center;
 }

 .band small {
     display: inline-block;
     color: rgba(46, 252, 255, .70);
     letter-spacing: 1px;
     font-weight: 900;
     text-transform: uppercase;
     font-size: .72rem;
     margin-bottom: .55rem;
 }

 .band h2 {
     margin: 0;
     font-size: clamp(1.9rem, 3vw, 2.4rem);
     letter-spacing: -0.3px;
 }

 .underline {
     width: 74px;
     height: 3px;
     margin: .8rem auto 0;
     border-radius: 999px;
     background: linear-gradient(90deg, rgba(46, 252, 255, 1), rgba(255, 43, 214, 1));
     box-shadow: 0 0 22px rgba(46, 252, 255, .20);
 }

 /* ===== About content ===== */
 .aboutGrid {
     display: grid;
     grid-template-columns: 1fr 1.2fr;
     gap: 1.2rem;
     padding-bottom: 3rem;
 }

 .artCard {
     border-radius: var(--r);
     border: 1px solid rgba(255, 255, 255, .12);
     background: rgba(255, 255, 255, .05);
     box-shadow: var(--shadow);
     overflow: hidden;
     position: relative;
     padding: 1.1rem;
     min-height: 320px;
 }

 .neonSign {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: .6rem .9rem;
     border-radius: 12px;
     border: 1px solid rgba(46, 252, 255, .26);
     background: rgba(46, 252, 255, .08);
     font-weight: 950;
     letter-spacing: .9px;
     text-transform: uppercase;
     box-shadow: 0 0 30px rgba(46, 252, 255, .10);
 }

 .artSVG {
     position: absolute;
     inset: 0;
     padding: 1.2rem;
     display: grid;
     place-items: center;
     opacity: .95;
     top: 1.9rem;
 }

 .infoCard {
     border-radius: var(--r);
     border: 1px solid rgba(255, 255, 255, .12);
     background: rgba(255, 255, 255, .05);
     box-shadow: var(--shadow);
     padding: 1.2rem;
 }

 .callout {
     display: flex;
     gap: .8rem;
     align-items: flex-start;
     margin-bottom: .9rem;
 }

 .xp {
     width: 74px;
     border-radius: 12px;
     border: 1px solid rgba(255, 43, 214, .22);
     background: rgba(255, 43, 214, .08);
     padding: .7rem .6rem;
     text-align: center;
     box-shadow: 0 0 30px rgba(255, 43, 214, .10);
     flex: 0 0 auto;
 }

 .xp strong {
     display: block;
     font-size: 1.35rem;
 }

 .xp span {
     display: block;
     font-size: .75rem;
     color: rgba(255, 255, 255, .70);
     margin-top: .2rem;
 }

 .infoCard h3 {
     margin: .1rem 0 .5rem;
     font-size: 1.2rem;
     letter-spacing: -.2px;
 }

 .infoCard p {
     margin: 0 0 1rem;
     color: var(--muted);
     line-height: 1.6;
 }

 .barList {
     margin-top: 1rem;
     display: grid;
     gap: .75rem;
 }

 .barRow {
     display: grid;
     grid-template-columns: 1fr auto;
     gap: .6rem;
     align-items: center;
 }

 .barRow label {
     color: rgba(255, 255, 255, .82);
     font-weight: 800;
     font-size: .86rem;
 }

 .barRow .pct {
     color: rgba(255, 255, 255, .70);
     font-size: .86rem;
 }

 .track {
     grid-column: 1 / -1;
     height: 10px;
     border-radius: 999px;
     border: 1px solid rgba(255, 255, 255, .12);
     background: rgba(0, 0, 0, .22);
     overflow: hidden;
 }

 .fill {
     height: 100%;
     width: 0%;
     border-radius: 999px;
     background: linear-gradient(90deg, rgba(46, 252, 255, .95), rgba(255, 43, 214, .85));
     box-shadow: 0 0 22px rgba(46, 252, 255, .12);
     transition: width 900ms ease;
 }

 /* ===== Footer-ish strip (optional) ===== */
 .miniHub {
     padding: 0 0 2.5rem;
 }

 .portalRow {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1rem;
 }

 .portal {
     border-radius: var(--r);
     border: 1px solid rgba(255, 255, 255, .12);
     background: rgba(255, 255, 255, .05);
     box-shadow: var(--shadow);
     padding: 1.05rem;
     position: relative;
     overflow: hidden;
     transform-style: preserve-3d;
     transition: transform 160ms ease, border-color 160ms ease;
 }

 .portal::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .08), transparent);
     transform: translateX(-120%);
     opacity: .9;
 }

 .portal:hover {
     transform: translateY(-5px);
     border-color: rgba(46, 252, 255, .20);
 }

 .portal:hover::after {
     animation: sheen 900ms ease;
 }

 @keyframes sheen {
     from {
         transform: translateX(-120%);
     }

     to {
         transform: translateX(120%);
     }
 }

 .portal .icon {
     width: 46px;
     height: 46px;
     display: grid;
     place-items: center;
     border-radius: 16px;
     border: 1px solid rgba(255, 255, 255, .14);
     background: rgba(0, 0, 0, .20);
     margin-bottom: .65rem;
     font-size: 1.2rem;
 }

 .portal h4 {
     margin: .1rem 0 .35rem;
     font-size: 1.05rem;
 }

 .portal p {
     margin: 0 0 .8rem;
     color: var(--muted);
     line-height: 1.5;
 }

 .portal .go {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: .75rem .85rem;
     border-radius: 14px;
     border: 1px solid rgba(255, 255, 255, .12);
     background: rgba(0, 0, 0, .22);
     font-weight: 900;
 }

 .portal .go span {
     color: rgba(255, 255, 255, .70);
     font-weight: 800;
 }

 /* ===== Responsive ===== */
 @media (max-width: 980px) {
     nav {
         display: none;
     }

     .heroGrid {
        display: grid;
         grid-template-columns:.9fr 1.1fr;
         gap: 1.2rem;
     }

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

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

     .panel .codeArea {
         min-height: 290px;
     }

     .techRow{
        display: none;
     }     
 }
 @media(max-width: 600px){
    .panel{
        display: none;
    }

    .heroGrid {
        display: grid;
         grid-template-columns:1fr;
         gap: 1.2rem;
     }
 }


 /* =============PLACEHOLDER STYLE================= */

 .soon{
    display: flex;
    align-items: center;
    justify-items: center;
    padding: 3rem 0 2.2rem;
    text-align: center;
 }