:root{

      --bg:#0b0f14;

      --panel:#101824;

      --panel2:#0f1620;

      --text:#e7eef9;

      --muted:#b8c4d9;

      --muted2:#8fa3bf;

      --line:#223246;



      --lum-orange:#f59e0b;

      --lum-orange-2:#fb923c;



      --shadow: 0 12px 30px rgba(0,0,0,.35);

      --radius: 16px;

      --max: 1100px;

    }



    *{box-sizing:border-box}

    html{scroll-behavior:smooth}

    body{

      margin:0;

      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;

      color:var(--text);

      background:

        radial-gradient(1200px 600px at 20% -10%, rgba(245, 158, 11, .14), transparent 60%),

        radial-gradient(900px 500px at 85% 15%, rgba(245, 158, 11, .07), transparent 55%),

        linear-gradient(180deg, #070a0f, #0b0f14 25%, #0b0f14);

      line-height:1.55;

    }

    a{color:inherit}

    .wrap{max-width:var(--max); margin:0 auto; padding:0 20px}



    .skip{

      position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;

    }

    .skip:focus{

      left:16px; top:16px; width:auto; height:auto; padding:10px 12px;

      background:var(--panel); border:1px solid var(--line); border-radius:12px; z-index:9999;

    }



    /* Header */

    header{

      position:sticky; top:0; z-index:50;

      backdrop-filter: blur(10px);

      background: rgba(11,15,20,.72);

      border-bottom:1px solid rgba(34,50,70,.6);

    }

    .nav{

      display:flex; align-items:center; justify-content:space-between;

      padding:14px 0;

      gap:12px;

    }

    .brand{

      display:flex; align-items:center; gap:12px; text-decoration:none;

      font-weight:900; letter-spacing:.2px;

    }

    .brand-logo{

      width:34px; height:34px;

      border-radius:12px;

      overflow:hidden;

      background: rgba(245,158,11,.12);

      border:1px solid rgba(245,158,11,.25);

      box-shadow: 0 10px 25px rgba(245,158,11,.10);

      display:grid; place-items:center;

      flex:0 0 auto;

    }

    .brand-logo img{width:100%; height:100%; object-fit:cover; display:block}



    nav ul{list-style:none; display:flex; gap:14px; padding:0; margin:0; align-items:center}

    nav a{

      text-decoration:none;

      color:var(--muted);

      font-weight:800;

      padding:8px 10px;

      border-radius:12px;

      border:1px solid transparent;

    }

    nav a:hover, nav a:focus-visible{

      color:var(--text);

      border-color:rgba(34,50,70,.8);

      background:rgba(16,24,36,.55);

      outline:none;

    }

    nav a.active{

      color: var(--text);

      border-color: rgba(245,158,11,.35);

      background: rgba(245,158,11,.08);

    }



    .menu-btn{

      display:none;

      border:1px solid rgba(34,50,70,.85);

      background:rgba(16,24,36,.55);

      color:var(--text);

      padding:10px 12px;

      border-radius:14px;

      font-weight:900;

      cursor:pointer;

    }

    .menu-btn:focus-visible{outline:2px solid rgba(245,158,11,.35); outline-offset:2px}



    .nav-right{display:flex; align-items:center; gap:10px}



    .btn{

      display:inline-flex; align-items:center; justify-content:center;

      gap:10px;

      text-decoration:none;

      padding:11px 14px;

      border-radius:14px;

      border:1px solid rgba(34,50,70,.85);

      background:rgba(16,24,36,.55);

      color:var(--text);

      font-weight:900;

      transition: transform .08s ease, background .2s ease, border-color .2s ease;

      white-space:nowrap;

    }

    .btn:hover{transform: translateY(-1px); background:rgba(16,24,36,.75)}

    .btn:active{transform: translateY(0px)}

    .btn.primary{

      border-color: rgba(245,158,11,.55);

      background: linear-gradient(135deg, rgba(245,158,11,.22), rgba(251,146,60,.10));

    }

    .btn.primary:hover{border-color: rgba(245,158,11,.85)}

    .btn.ghost{

      background:transparent;

      border-color: rgba(34,50,70,.85);

    }



    .mobile-panel{

      display:none;

      border-top:1px solid rgba(34,50,70,.65);

      padding:10px 0 14px;

    }

    .mobile-panel a{

      display:block;

      text-decoration:none;

      color:var(--muted);

      font-weight:900;

      padding:10px 10px;

      border-radius:12px;

      border:1px solid transparent;

    }

    .mobile-panel a:hover, .mobile-panel a:focus-visible{

      color:var(--text);

      border-color: rgba(34,50,70,.85);

      background: rgba(16,24,36,.55);

      outline:none;

    }

    .mobile-open .mobile-panel{display:block}



    /* Page */

    main{padding:34px 0 64px}



    .hero{

      padding:12px 0 12px;

    }

    .kicker{

      display:inline-flex; gap:10px; align-items:center;

      padding:8px 10px;

      border:1px solid rgba(34,50,70,.85);

      background:rgba(16,24,36,.55);

      border-radius:999px;

      color:var(--muted);

      font-weight:900;

      font-size:14px;

    }

    .kicker .dot{

      width:8px; height:8px; border-radius:999px;

      background: var(--lum-orange);

      box-shadow: 0 0 0 3px rgba(245,158,11,.18);

    }



    h1{

      margin:14px 0 8px;

      font-size: clamp(30px, 4.0vw, 46px);

      line-height:1.08;

      letter-spacing:-.5px;

    }

    .lede{

      margin:0;

      color:var(--muted);

      max-width: 85ch;

      font-size:16px;

    }



    /* Layout */

    section{padding:18px 0}

    .section-title{

      display:flex; align-items:baseline; justify-content:space-between;

      gap:16px;

      margin:0 0 12px;

    }

    .section-title h2{

      margin:0;

      font-size:18px;

      letter-spacing:.2px;

    }

    .section-title h2 .mark{ color: var(--lum-orange); }



    .grid{

      display:grid;

      grid-template-columns: 1fr 1fr;

      gap:12px;

    }

    .card{

      border:1px solid rgba(34,50,70,.85);

      border-radius: var(--radius);

      background: rgba(16,24,36,.35);

      padding:18px;

      box-shadow: var(--shadow);

    }

    .card h3{margin:0 0 6px; font-size:18px}

    .card h3 .mark{ color: var(--lum-orange); }

    .card p{margin:0 0 12px; color:var(--muted); font-size:14px}



    .callout{

      border:1px solid rgba(245,158,11,.28);

      background: rgba(245,158,11,.08);

      border-radius: var(--radius);

      padding:14px;

      color: var(--muted);

      font-size:14px;

    }

    .callout b{color:var(--text)}



    .steps{

      display:grid;

      gap:10px;

    }

    .step{

      padding:14px;

      border:1px solid rgba(34,50,70,.85);

      border-radius: var(--radius);

      background: rgba(16,24,36,.28);

    }

    .step h4{margin:0 0 4px; font-size:14px}

    .step p{margin:0; color:var(--muted); font-size:13px}



    .pillbar{

      display:flex;

      flex-wrap:wrap;

      gap:10px;

      margin-top:10px;

    }

    .pill{

      display:inline-flex;

      padding:6px 10px;

      border-radius:999px;

      border:1px solid rgba(34,50,70,.85);

      background: rgba(15,22,32,.55);

      color:var(--muted);

      font-weight:900;

      font-size:12px;

      gap:8px;

      align-items:center;

    }

    .pill b{color:var(--text)}

    .pill .dot{

      width:7px; height:7px; border-radius:999px;

      background: var(--lum-orange);

    }



    .choices{

      display:grid;

      grid-template-columns: repeat(3, 1fr);

      gap:12px;

    }

    .choice{

      border:1px solid rgba(34,50,70,.85);

      border-radius: var(--radius);

      background: rgba(16,24,36,.35);

      padding:18px;

      box-shadow: var(--shadow);

      display:flex;

      flex-direction:column;

      gap:10px;

      justify-content:space-between;

      min-height: 210px;

    }

    .choice h3{margin:0; font-size:16px}

    .choice p{margin:0; color:var(--muted); font-size:13px}

    .choice ul{margin:10px 0 0; padding-left:18px; color:var(--muted); font-size:13px}

    .choice li{margin:6px 0}

    .choice .actions{display:flex; gap:10px; flex-wrap:wrap}



    .actions{display:flex; gap:10px; flex-wrap:wrap}



    .meta{

      margin-top:14px;

      padding:14px 14px;

      border:1px solid rgba(34,50,70,.85);

      border-radius: var(--radius);

      background: rgba(16,24,36,.35);

      color: var(--muted);

      font-size:14px;

    }

    .meta a{

      color:var(--text);

      text-decoration:none;

      border-bottom:1px dashed rgba(245,158,11,.45);

    }

    .meta a:hover{border-bottom-color:rgba(245,158,11,.9)}



	footer{

	  border-top:1px solid rgba(34,50,70,.65);

	  padding:22px 0;

	  color: var(--muted2);

	  font-size:14px;

	}



	.footer-grid{

	  display:flex;

	  justify-content:space-between;

	  gap:14px;

	  flex-wrap:wrap;

	  align-items:center;

	}



	.foot-links{display:flex; gap:10px; flex-wrap:wrap}



	.foot-links a{

	  color:var(--muted);

	  text-decoration:none;

	  padding:6px 10px;

	  border-radius:12px;

	  border:1px solid transparent;

	  font-weight:800;

	}



	.foot-links a:hover{

	  color:var(--text);

	  border-color: rgba(34,50,70,.85);

	  background: rgba(16,24,36,.45);

	}



    @media (max-width: 920px){

      .choices{grid-template-columns: 1fr}

    }

    @media (max-width: 760px){

      nav ul{display:none}

      .menu-btn{display:inline-flex}

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

    }