:root{
      --bg:#05040a;
      --panel:rgba(255,255,255,.06);
      --panel2:rgba(255,255,255,.085);
      --border:rgba(255,255,255,.12);
      --txt:#eaeaf2;
      --muted:rgba(234,234,242,.72);
      --accent:#00ffd5;
      --accent2:#ff3df2;
      --shadow: 0 18px 60px rgba(0,0,0,.55);
      --radius: 20px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:var(--sans);
      color:var(--txt);
      background:var(--bg);
      overflow-x:hidden;
    }

    /* Background */
    #matrix{
      position:fixed;
      inset:0;
      width:100%;
      height:100%;
      z-index:-3;
      opacity:.28;
      pointer-events:none;
    }
    .glow{
      position:fixed; inset:0; z-index:-2; pointer-events:none;
      background:
        radial-gradient(circle at 20% 20%, rgba(0,255,213,.14), transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(255,61,242,.12), transparent 46%),
        radial-gradient(circle at 60% 10%, rgba(255,204,0,.08), transparent 40%),
        radial-gradient(circle at 40% 95%, rgba(120,90,255,.10), transparent 52%);
      filter:saturate(140%);
      animation: hue 6s linear infinite;
    }
    @keyframes hue{
      from{filter:hue-rotate(0deg) saturate(150%)}
      to{filter:hue-rotate(360deg) saturate(150%)}
    }

    .noise{
      position:fixed; inset:0; z-index:-1; pointer-events:none;
      opacity:.12; mix-blend-mode:overlay;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
    }

    /* Layout */
    .wrap{max-width:1100px;margin:0 auto;padding:22px;}
    header{
      position:sticky; top:0; z-index:20;
      backdrop-filter: blur(10px);
      background: linear-gradient(to bottom, rgba(0,0,0,.60), rgba(0,0,0,.12));
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .nav{
      display:flex; align-items:center; justify-content:space-between;
      gap:14px;
      padding:14px 22px;
      max-width:1100px; margin:0 auto;
    }
    .brand{
      display:flex; align-items:center; gap:10px;
      font-weight:900; letter-spacing:.5px;
    }
    .dot{
      width:10px;height:10px;border-radius:50%;
      background:conic-gradient(from 180deg, var(--accent), var(--accent2), var(--accent));
      box-shadow:0 0 20px rgba(0,255,213,.35);
      animation: hue 6s linear infinite;
    }
    .nav a{
      color:var(--muted);
      text-decoration:none;
      font-weight:700;
      font-size:14px;
      padding:8px 10px;
      border-radius:999px;
      transition:.2s;
    }
    .nav a:hover{color:var(--txt); background:rgba(255,255,255,.06)}

    /* Smooth scroll */
    html{scroll-behavior:smooth;}

    /* Hero */
    main{padding:28px 0 46px;}
    .hero{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:18px;
      align-items:stretch;
    }
    @media (max-width: 900px){ .hero{grid-template-columns:1fr} }

    .card{
      border:1px solid var(--border);
      background:linear-gradient(180deg, var(--panel), rgba(255,255,255,.03));
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .card::before{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(circle at 20% 10%, rgba(0,255,213,.20), transparent 40%),
        radial-gradient(circle at 85% 70%, rgba(255,61,242,.18), transparent 44%);
      opacity:.45;
      pointer-events:none;
      animation: hue 6s linear infinite;
    }

    .card-inner{position:relative; padding:22px}
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.06);
      padding:10px 12px;
      border-radius:999px;
      font-size:13px;
      color:var(--muted);
    }
    .pill b{color:var(--txt)}
    .spark{
      width:8px;height:8px;border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 16px rgba(0,255,213,.45);
      animation: hue 6s linear infinite;
    }

    h1{
      margin:12px 0 10px;
      font-size:clamp(28px, 4vw, 44px);
      line-height:1.06;
    }
    .sub{
      color:var(--muted);
      font-size:15px;
      line-height:1.6;
      max-width:60ch;
    }

    /* Terminal */
    .terminal{
      margin-top:14px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(0,0,0,.22);
      border-radius:16px;
      overflow:hidden;
    }
    .term-top{
      display:flex; align-items:center; gap:8px;
      padding:10px 12px;
      border-bottom:1px solid rgba(255,255,255,.08);
      font-family:var(--mono);
      font-size:12px;
      color:rgba(255,255,255,.75);
    }
    .dots{display:flex;gap:6px}
    .dots i{width:10px;height:10px;border-radius:50%;display:inline-block;opacity:.8}
    .dots i:nth-child(1){background:#ff5f57}
    .dots i:nth-child(2){background:#febc2e}
    .dots i:nth-child(3){background:#28c840}
    .term-body{
      padding:12px 12px 14px;
      font-family:var(--mono);
      color:rgba(255,255,255,.86);
      font-size:13px;
      min-height:64px;
    }
    .caret{
      display:inline-block;
      width:10px;
      margin-left:2px;
      border-right:2px solid var(--accent2);
      animation: blink .9s step-end infinite;
      height:14px;
      transform:translateY(2px);
    }
    @keyframes blink{ 50%{opacity:0} }

    .cta-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;}
    .btn{
      border:1px solid var(--border);
      background:rgba(255,255,255,.06);
      color:var(--txt);
      padding:12px 14px;
      border-radius:14px;
      font-weight:900;
      font-size:14px;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap:10px;
      transition:.2s;
    }
    .btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.12)}
    .btn.primary{
      border-color:rgba(0,255,213,.35);
      background:linear-gradient(180deg, rgba(0,255,213,.18), rgba(255,255,255,.06));
    }

    /* Right card */
    .mini{display:flex; flex-direction:column; gap:12px; height:100%;}
    .qr{
      border:1px dashed rgba(255,255,255,.18);
      border-radius:18px;
      padding:14px;
      background:rgba(0,0,0,.18);
    }
    .qrbox{
      width:100%;
      aspect-ratio:1/1;
      border-radius:14px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 6px, transparent 6px 12px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 6px, transparent 6px 12px);
      opacity:.85;
      position:relative;
      overflow:hidden;
    }
    .qrbox::after{
      content:"ELEVATEX BY ZAID";
      position:absolute; inset:0;
      display:grid; place-items:center;
      font-family:var(--mono);
      letter-spacing:.32em;
      color:rgba(255,255,255,.70);
      font-size:12px;
      text-shadow:0 0 18px rgba(0,255,213,.25);
    }

    /* Sections */
    section{margin-top:18px}
    .section-title{
      display:flex; align-items:center; gap:10px;
      font-weight:900; letter-spacing:.08em;
      font-family:var(--mono);
      color:rgba(255,255,255,.84);
      font-size:13px;
      text-transform:uppercase;
      margin:0 0 10px;
    }
    .section-title .line{
      height:1px; flex:1;
      background:linear-gradient(90deg, rgba(255,255,255,.18), transparent);
    }

    .grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap:12px;
    }
    @media (max-width: 700px){ .grid{grid-template-columns:1fr} }

    .linkcard{
      border:1px solid var(--border);
      background:rgba(255,255,255,.05);
      border-radius:18px;
      padding:14px 14px;
      display:flex; align-items:center; justify-content:space-between;
      gap:12px;
      text-decoration:none;
      color:var(--txt);
      transition:.2s;
      position:relative;
      overflow:hidden;
    }
    .linkcard::before{
      content:"";
      position:absolute; inset:-2px;
      background: linear-gradient(120deg, transparent, rgba(0,255,213,.12), transparent);
      transform:translateX(-60%);
      transition:.35s;
      pointer-events:none;
    }
    .linkcard:hover::before{ transform:translateX(60%); }
    .linkcard:hover{transform:translateY(-1px); background:rgba(255,255,255,.10)}
    .left{display:flex; flex-direction:column; gap:4px; min-width:0;}
    .left .title{font-weight:900;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .left .meta{color:var(--muted);font-size:12px;font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .icon{
      width:44px; height:44px; border-radius:14px;
      display:grid; place-items:center;
      border:1px solid rgba(255,255,255,.14);
      background:linear-gradient(180deg, rgba(0,255,213,.14), rgba(255,255,255,.04));
      flex:0 0 auto;
      font-size:18px;
    }
    .arrow{opacity:.85;font-family:var(--mono);font-weight:900;}

    footer{
      padding:22px 0 40px;
      color:rgba(255,255,255,.55);
      font-family:var(--mono);
      font-size:12px;
      text-align:center;
    }

    /* Intro Loader */
    .loader{
      position:fixed; inset:0; z-index:9999;
      background:radial-gradient(circle at center, rgba(0,255,213,.10), rgba(0,0,0,.95) 55%);
      display:grid; place-items:center;
      transition:opacity .45s ease, transform .45s ease;
    }
    .loader.hidden{opacity:0;transform:scale(1.02);pointer-events:none;}
    .loader-box{
      width:min(520px, 92vw);
      border:1px solid rgba(255,255,255,.14);
      background:rgba(0,0,0,.35);
      border-radius:22px;
      padding:18px;
      box-shadow:0 18px 70px rgba(0,0,0,.6);
      position:relative;
      overflow:hidden;
    }
    .loader-box::before{
      content:"";
      position:absolute; inset:-2px;
      background: radial-gradient(circle at 20% 10%, rgba(0,255,213,.22), transparent 40%),
                  radial-gradient(circle at 80% 80%, rgba(255,61,242,.18), transparent 45%);
      opacity:.6; pointer-events:none;
      animation: hue 6s linear infinite;
    }
    .loader-inner{position:relative}
    .loader-title{
      font-family:var(--mono);
      letter-spacing:.18em;
      text-transform:uppercase;
      font-size:12px;
      color:rgba(255,255,255,.75);
    }
    .loader-name{
      margin:10px 0 10px;
      font-size:22px;
      font-weight:1000;
    }
    .bar{
      height:10px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.10);
      border-radius:999px;
      overflow:hidden;
    }
    .bar > i{
      display:block;
      height:100%;
      width:0%;
      background:linear-gradient(90deg, var(--accent), var(--accent2));
      box-shadow:0 0 22px rgba(0,255,213,.3);
      border-radius:999px;
      transition:width .22s ease;
    }
    .loader-sub{
      margin-top:10px;
      font-family:var(--mono);
      color:rgba(255,255,255,.70);
      font-size:12px;
      display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
    }