:root{
  --max:1180px;
}
    .brand{
      display:flex; align-items:center; gap:12px;
      font-weight:900; letter-spacing:.4px;
      text-transform:uppercase;
    }
    .logoMark{
      width:40px; height:40px; border-radius:12px;
      background:
        linear-gradient(135deg, rgba(118,243,255,.9), rgba(255,79,216,.7)),
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 45%);
      box-shadow: 0 12px 30px rgba(118,243,255,.12), 0 12px 30px rgba(255,79,216,.10);
      display:grid; place-items:center;
      position:relative; overflow:hidden;
    }
    .logoMark:after{
      content:"";
      position:absolute; inset:-40%;
      background: repeating-linear-gradient(90deg, rgba(0,0,0,.0) 0 14px, rgba(0,0,0,.08) 14px 18px);
      transform: rotate(12deg);
      opacity:.7;
    }
    .logoMark span{
      position:relative; z-index:1; font-size:20px; font-family:var(--mono);
      text-shadow:0 2px 10px rgba(0,0,0,.35);
    }
    .brand .title{display:flex; flex-direction:column; line-height:1.05;}
    .brand .title strong{font-size:14px}
    .brand .title em{font-style:normal; font-size:11px; color:var(--muted); letter-spacing:.2px}

    .actions{display:flex; align-items:center; gap:10px}
    .search{
      display:flex; align-items:center; gap:10px;
      padding:10px 12px; margin-bottom:10px; border-radius:14px;
      background:rgba(17,19,26,.8);
      border:1px solid rgba(36,38,51,.9);
      width:100%;
      min-width: 260px;
    }
    .search input{
      width:100%;
      background:transparent; border:0; outline:0;
      color:var(--text); font-size:14px;
    }
    .btn.primary{
      /*border-color: rgba(118,243,255,.55);
      box-shadow: 0 10px 26px rgba(118,243,255,.10);*/
    }

    .nav{
      margin-top:12px;
      display:flex; gap:8px; flex-wrap:wrap;
    }
    .nav button{
      appearance:none; border:1px solid rgba(36,38,51,.9);
      background:rgba(17,19,26,.65);
      color:var(--text); border-radius:999px;
      padding:9px 12px; cursor:pointer;
      font-size:13px;
    }
    .nav button.active{
      border-color: rgba(118,243,255,.7);
      background: linear-gradient(135deg, rgba(118,243,255,.16), rgba(255,79,216,.10));
    }

    .grid{
      display:grid;
      grid-template-columns: 1.65fr .85fr;
      gap:18px;
      margin-top:18px;
    }
	#titleLink,#featureLink{
		padding:0;
		background:transparent;
		border:none;
		border-radius:0;
	}
    @media (max-width: 980px){
      .grid{grid-template-columns:1fr}
      .search{min-width:0; width:100%}
      .actions{flex:1}
    }

    .card{
      background: linear-gradient(180deg, rgba(17,19,26,.92), rgba(15,17,23,.92));
      /*border: 1px solid rgba(36,38,51,.9);*/
      border-radius: var(--radius2);
      box-shadow: var(--shadow);
      overflow:hidden;
    }

    /* HERO */
    .hero{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      min-height: 360px;
    }
    @media (max-width: 900px){
      .hero{grid-template-columns:1fr}
    }
    .heroMedia{
      position:relative;
      background:
        radial-gradient(700px 450px at 20% 10%, rgba(118,243,255,.22), transparent 60%),
        radial-gradient(700px 500px at 90% 20%, rgba(255,79,216,.18), transparent 55%),
        linear-gradient(135deg, rgba(255,209,102,.10), rgba(17,19,26,.0)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600'%3E%3Crect width='900' height='600' fill='%230b0c10'/%3E%3Cg opacity='.22'%3E%3Cpath d='M0 440 Q180 360 360 430 T720 420 T900 450 V600 H0 Z' fill='%2376f3ff'/%3E%3Cpath d='M0 500 Q220 420 420 505 T820 505 T900 520 V600 H0 Z' fill='%23ff4fd8'/%3E%3C/g%3E%3Cg opacity='.25'%3E%3Ccircle cx='140' cy='140' r='110' fill='%23ffd166'/%3E%3Ccircle cx='720' cy='120' r='90' fill='%2376f3ff'/%3E%3C/g%3E%3C/svg%3E");
      background-size: cover;
      border-right:1px solid rgba(36,38,51,.9);
    }
    @media (max-width: 900px){
       .heroMedia{border-right:0; border-bottom:1px solid rgba(36,38,51,.9);min-height:300px;}
    }
    .badgeRow{
      position:absolute; left:18px; top:18px;
      display:flex; gap:8px; flex-wrap:wrap;
    }
    .badge{
      font-size:12px; padding:7px 10px; border-radius:999px;
      background: rgba(11,12,16,.55);
      border: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(8px);
    }
    .badge .dot{
      display:inline-block; width:7px; height:7px; border-radius:99px;
      background: var(--accent); margin-right:7px; box-shadow:0 0 0 3px rgba(118,243,255,.12);
    }
    .heroBody{padding:22px 20px 18px; display:flex; flex-direction:column; gap:10px;}
    .kicker{
      font-family:var(--mono);
      font-size:12px; color:var(--muted);
      letter-spacing:.12em; text-transform:uppercase;
    }
    h1{
      margin:0;
      font-family:var(--serif);
      font-size:34px;
      line-height:1.05;
      letter-spacing:-.02em;
    }
    .dek{color: rgba(232,232,234,.86); font-size:15px; max-width: 60ch;}
    .meta{display:flex; gap:14px; flex-wrap:wrap; color:var(--muted); font-size:13px}
    .meta span{display:inline-flex; align-items:center; gap:8px}
    .pill{
      padding:6px 10px; border-radius:999px;
      border:1px solid rgba(36,38,51,.9);
      background: rgba(17,19,26,.7);
      font-size:12px;
    }
    .heroCtas{margin-top:auto; display:flex; gap:10px; flex-wrap:wrap}

    /* LATEST */
    .sectionHead{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap:10px;
      padding:16px 18px 0;
    }
    .sectionHead h2{
      margin:0;
      font-family:var(--serif);
      font-size:20px;
      letter-spacing:-.02em;
    }
    .sectionHead small{color:var(--muted)}

    .posts{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:14px;
      padding:14px 14px 16px;
    }
    @media (max-width: 640px){
      .posts{grid-template-columns:1fr}
    }
    .post{
      border-radius: var(--radius);
      border:1px solid rgba(36,38,51,.9);
      background: rgba(11,12,16,.25);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      min-height: 250px;
    }
    .postMedia{
      height: 120px;
      background:
        radial-gradient(220px 130px at 20% 20%, rgba(118,243,255,.22), transparent 60%),
        radial-gradient(220px 140px at 80% 20%, rgba(255,79,216,.18), transparent 55%),
        linear-gradient(135deg, rgba(255,209,102,.10), rgba(17,19,26,.0));
      border-bottom:1px solid rgba(36,38,51,.9);
      position:relative;
    }
    .postMedia:after{
      content:"";
      position:absolute; inset:0;
      background: repeating-linear-gradient(90deg, rgba(0,0,0,.0) 0 16px, rgba(0,0,0,.08) 16px 19px);
      opacity:.45;
      mix-blend-mode: overlay;
    }
    .postBody{padding:14px 14px 12px; display:flex; flex-direction:column; gap:10px; flex:1}
    .postTitle{
      margin:0;
      font-size:17px;
      line-height:1.15;
      letter-spacing:-.01em;
      font-family:var(--serif);
    }
    .postDesc{margin:0; color: rgba(232,232,234,.80); font-size:13.5px}
    .postMeta{
      margin-top:auto;
      display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
      color:var(--muted); font-size:12px;
    }
    .tag{
      padding:6px 9px; border-radius:999px;
      border:1px solid rgba(36,38,51,.9);
      background: rgba(17,19,26,.55);
      font-size:12px;
    }

    /* SIDEBAR */
    .sidebar{display:flex; flex-direction:column; gap:14px}
    .module{padding:16px}
    .module h3{
      margin:0 0 10px 0;
      font-size:14px;
      font-family:var(--mono);
      letter-spacing:.10em;
      text-transform:uppercase;
      color: rgba(232,232,234,.92);
    }
    .list{display:flex; flex-direction:column; gap:10px}
    .list a{
      padding:10px 10px;
      border-radius: 14px;
      border:1px solid rgba(36,38,51,.9);
      background: rgba(11,12,16,.25);
      display:flex; gap:10px;
    }
    .list a:hover{border-color: rgba(118,243,255,.5)}
    .miniTitle{font-size:13px; margin:0; line-height:1.2}
    .miniMeta{font-size:12px; color:var(--muted); margin-top:4px}
    .miniThumb{
      width:46px; height:46px; border-radius: 14px;
      background:
        radial-gradient(40px 30px at 30% 20%, rgba(118,243,255,.25), transparent 60%),
        radial-gradient(40px 34px at 80% 20%, rgba(255,79,216,.18), transparent 60%),
        rgba(17,19,26,.9);
      border:1px solid rgba(36,38,51,.9);
      flex:0 0 auto;
    }

    .newsletter{
      display:flex; gap:10px; flex-wrap:wrap; align-items:center;
      margin-top:10px;
    }
    .newsletter input{
      flex:1;
      min-width: 180px;
      padding:11px 12px;
      border-radius: 999px;
      border:1px solid rgba(36,38,51,.9);
      background: rgba(11,12,16,.3);
      color:var(--text);
      outline: none;
    }

    .note{color:var(--muted); font-size:12px; margin:10px 0 0}

    footer{
      margin-top:22px;
      color:var(--muted);
      font-size:12px;
      border-top:1px solid rgba(36,38,51,.7);
      padding-top:18px;
      display:flex;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .footerLinks{display:flex; gap:12px; flex-wrap:wrap}
    .footerLinks a:hover{color:var(--text)}
    .sr{position:absolute; left:-9999px}