:root{
      --bg:#04050a;
      --panel:#0d1220;
      --muted:#b9c4d8;
      --accent1:#8c5bff;
      --accent2:#17e0ff;
      --glass: rgba(255,255,255,0.03);
      --border: rgba(255,255,255,0.06);
      --radius:18px;
      --max-width:1200px;
      --neon: 0 8px 40px rgba(23,224,255,0.08), 0 2px 6px rgba(140,91,255,0.04);
      --glass-2: rgba(23,224,255,0.06);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background:
        #07101a;
      color:#e6eefc;
      -webkit-font-smoothing:antialiased;
      padding:30px 16px 80px;
      display:flex;
      justify-content:center;
    }

    /* layout wrapper */
    .container{
      width:100%;
      max-width:var(--max-width);
      margin-top:80px;
    }

    .brand{
      display:flex; align-items:center; gap:12px;
    }
    .brand img{height:44px; width:auto; border-radius:10px; display:block}
    .brand .name{font-family:"Luckiest Guy",sans-serif; color:var(--accent2); letter-spacing:1px; font-size:18px;}
    .nav-right{margin-left:auto; display:flex; gap:8px; align-items:center}
    .nav-link{color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:10px; font-weight:600; font-size:13px}
    .nav-link:hover{color:white; background: linear-gradient(90deg, rgba(140,91,255,0.06), rgba(23,224,255,0.03))}

    /* HERO */
    .hero {
      position:relative;
      padding:34px;
      border-radius:20px;
      border:1px solid var(--border);
      background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.004));
      overflow:hidden;
      box-shadow: 0 12px 60px rgba(3,8,18,0.6);
    }
    .hero-grid{display:grid; grid-template-columns: 1fr; gap:18px; align-items:center}
    @media(min-width:1000px){ .hero-grid{grid-template-columns: 1fr 360px; gap:28px} }

    .hero-badge{
      display:inline-flex; align-items:center; gap:10px; font-weight:700; color:var(--muted);
      background: linear-gradient(90deg, rgba(140,91,255,0.06), rgba(23,224,255,0.03));
      padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,0.02);
      width:max-content;
    }

    h1{
      margin:6px 0 6px;
      font-size:40px; line-height:1.02;
      background:linear-gradient(90deg,var(--accent1),var(--accent2));
      -webkit-background-clip:text; color:transparent;
      display:block;
      letter-spacing:-0.5px;
    }
    .hero-sub{color:var(--muted); font-size:15px}
    .hero-lead{color:#dfe9ff; opacity:0.94; font-size:15px; line-height:1.6; margin-top:6px}

    .hero-cta{display:flex; gap:12px; margin-top:12px; flex-wrap:wrap}
    .btn{
      display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:12px; font-weight:800; text-decoration:none;
      background:linear-gradient(90deg,var(--accent1),var(--accent2)); color:black;
      box-shadow: 0 10px 30px rgba(23,224,255,0.08), 0 4px 12px rgba(140,91,255,0.05);
      transition: transform .18s ease;
      font-size:14px;
    }
    .btn.alt{background:transparent; color:var(--muted); border:1px solid rgba(255,255,255,0.04); box-shadow:none}
    .btn:active,.btn:focus{transform:translateY(-3px)}

    /* right hero card */
    .hero-side{
      border-radius:12px; padding:16px; background: linear-gradient(180deg, rgba(23,224,255,0.02), rgba(140,91,255,0.02));
      border:1px solid rgba(23,224,255,0.04);
      box-shadow: 0 8px 30px rgba(1,8,20,0.5);
    }
    .progress{
      display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:8px;
    }
    .progress .bar{flex:1; height:12px; background: rgba(255,255,255,0.03); border-radius:8px; overflow:hidden}
    .progress .bar > i{display:block; height:100%; background: linear-gradient(90deg,var(--accent1),var(--accent2)); width:54%}
    .mini{font-size:13px; color:var(--muted)}

    /* MAIN GRID */
    .main{
      margin-top:18px; display:grid; grid-template-columns: 1fr; gap:22px;
    }
    @media(min-width:960px){ .main{grid-template-columns: 2fr 420px} }

    /* missions area */
    .missions{
      padding:18px; border-radius:14px; border:1px solid var(--border);
      background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.004));
      box-shadow: 0 12px 40px rgba(2,6,20,0.6);
    }
    .missions h2{margin:0 0 8px; color:var(--accent2)}
    .missions p{color:var(--muted)}

    .missions-grid{
      margin-top:12px; display:grid; gap:14px;
      grid-template-columns: 1fr;
    }
    @media(min-width:720px){ .missions-grid{grid-template-columns: repeat(2,1fr)} }

    .mission-card{
      position:relative; overflow:hidden;
      border-radius:12px; padding:14px; border:1px solid rgba(255,255,255,0.03);
      background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.002));
      transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s ease;
      cursor:default;
    }
    .mission-card:hover{ transform: translateY(-8px); box-shadow: 0 22px 60px rgba(6,12,30,0.6) }
    .mission-head{display:flex; gap:12px; align-items:flex-start}
    .mission-ico{
      min-width:56px; height:56px; border-radius:12px; display:grid; place-items:center;
      background: linear-gradient(135deg,var(--accent1),var(--accent2));
      color:black; font-weight:900; font-size:22px; box-shadow: 0 8px 30px rgba(140,91,255,0.12);
    }
    .mission-title{font-weight:800; font-size:15px}
    .mission-sub{font-size:13px; color:var(--muted); margin-top:6px}

    .mission-body{margin-top:12px; color:var(--muted); font-size:14px; line-height:1.5; display:none}
    .mission-card.expanded .mission-body{display:block}

    .meta{display:flex; gap:8px; align-items:center; margin-top:10px}
    .tag{font-size:12px; padding:6px 8px; border-radius:10px; background:transparent; color:var(--muted); border:1px solid rgba(255,255,255,0.03)}

    .expand-btn{
      margin-left:auto; background:transparent; border:0; color:var(--accent2); font-weight:800; cursor:pointer;
      padding:6px 8px; border-radius:8px; font-size:13px;
    }

    /* SIDE COLUMN */
    .side{
      display:flex; flex-direction:column; gap:14px;
      position:sticky; top:120px;
    }
    .card{
      padding:16px; border-radius:12px; border:1px solid var(--border);
      background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.003));
      box-shadow: 0 8px 30px rgba(2,6,23,0.6);
    }
    .card h3{margin:0; color:var(--accent2)}

    .how-list ul{margin:8px 0 0 18px; color:var(--muted); font-size:14px}
    .how-list strong{color:var(--accent1)}

    .pro{display:flex; gap:12px; align-items:center; padding:12px; border-radius:12px; background:linear-gradient(90deg, rgba(23,224,255,0.03), rgba(140,91,255,0.02)); border:1px solid rgba(23,224,255,0.06)}

    .cta-sticky{
      display:flex; gap:10px; justify-content:center; align-items:center; padding:12px; border-radius:12px;
      background: linear-gradient(90deg, rgba(140,91,255,0.04), rgba(23,224,255,0.02));
    }