:root{
      --bg:#0f172a;
      --section:#1e293b;
      --primary:#38bdf8;
      --text:#e5e7eb;
      --light-1:#f8fbff;
      --light-2:#eef6ff;
      --light-3:#dbeafe;
      --light-4:#f1f5f9;
      --border:#38bdf8;
    }
    html{
      scroll-behavior:smooth;
    }
    body{
      margin:0;
      font-family: Arial, Helvetica, sans-serif;
      background:
        radial-gradient(circle at top left, rgba(56,189,248,.22), transparent 28%),
        radial-gradient(circle at bottom right, rgba(56,189,248,.18), transparent 30%),
        linear-gradient(135deg, var(--light-1) 0%, var(--light-2) 52%, var(--light-4) 100%);
      color:var(--text);
      min-height:100vh;
    }
    .app-shell{
      display:flex;
      min-height:100vh;
    }
    .sidebar{
      width:290px;
      background:linear-gradient(180deg, rgba(15,23,42,.96), rgba(30,41,59,.96));
      color:var(--text);
      padding:1rem;
      position:sticky;
      top:0;
      height:100vh;
      border-right:4px solid var(--primary);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      box-shadow:10px 0 0 rgba(56,189,248,.10);
    }
    .brand-box{
      background:var(--section);
      border:3px solid var(--primary);
      padding:1rem;
      transform:rotate(-1deg);
    }
    .brand-title{
      font-size:1.8rem;
      font-weight:900;
      line-height:1;
      margin:0;
      color:#ffffff;
      text-transform:uppercase;
    }
    .brand-subtitle{
      margin-top:.55rem;
      color:var(--text);
      font-size:.95rem;
    }
    .menu-stack{
      margin-top:1rem;
    }
    .menu-link{
      display:flex;
      align-items:center;
      justify-content:space-between;
      background:transparent;
      color:var(--text);
      border:2px solid var(--primary);
      padding:.9rem 1rem;
      margin-bottom:.75rem;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.04em;
      transition:transform .28s ease, background .28s ease, color .28s ease, box-shadow .28s ease;
    }
    .menu-link:hover{
      background:var(--primary);
      color:#0f172a;
      transform:scale(1.03);
      box-shadow:6px 6px 0 rgba(255,255,255,.14);
    }
    .sidebar-note{
      background:rgba(56,189,248,.10);
      border-left:4px solid var(--primary);
      padding:.9rem;
      font-size:.92rem;
      line-height:1.45;
    }
    .main-content{
      flex:1;
      padding:1rem;
      color:#0f172a;
    }
    .section-panel{
      background:var(--section);
      border:3px solid var(--primary);
      box-shadow:8px 8px 0 rgba(56,189,248,.18);
      margin-bottom:1rem;
      overflow:hidden;
    }
    .hero-wrap{
      display:flex;
      flex-wrap:wrap;
      min-height:420px;
    }
    .hero-copy{
      flex:1 1 340px;
      padding:1.25rem;
      display:flex;
      flex-direction:column;
      justify-content:center;
      background:
        linear-gradient(135deg, rgba(30,41,59,.98), rgba(30,41,59,.90)),
        linear-gradient(135deg, var(--light-3), var(--light-1));
      color:var(--text);
    }
    .hero-media{
      flex:1 1 380px;
      min-height:320px;
      position:relative;
      overflow:hidden;
      background:linear-gradient(145deg, rgba(56,189,248,.26), rgba(255,255,255,.18));
    }
    .hero-media img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      box-shadow:0 18px 40px rgba(15,23,42,.28);
      transition:transform .5s ease;
    }
    .hero-media:hover img{
      transform:scale(1.08);
    }
    .eyebrow{
      display:inline-block;
      background:var(--primary);
      color:#0f172a;
      padding:.3rem .55rem;
      font-weight:900;
      text-transform:uppercase;
      margin-bottom:.8rem;
    }
    .hero-title{
      font-size:clamp(2.2rem, 5vw, 4.5rem);
      line-height:.95;
      font-weight:900;
      margin:0 0 .9rem 0;
      color:#ffffff;
      text-transform:uppercase;
      max-width:9ch;
    }
    .hero-text{
      font-size:1.02rem;
      line-height:1.6;
      max-width:58ch;
      color:var(--text);
      margin-bottom:1rem;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.75rem;
      align-items:center;
    }
    .button.is-outline-brutal{
      background:transparent;
      border:2px solid var(--primary);
      color:var(--text);
      border-radius:0;
      font-weight:800;
      text-transform:uppercase;
      transition:all .28s ease;
    }
    .button.is-outline-brutal:hover{
      background:var(--primary);
      color:#0f172a;
      transform:scale(1.05);
    }
    .hero-strip{
      display:flex;
      flex-wrap:wrap;
      gap:.75rem;
      padding:0 1.25rem 1.1rem 1.25rem;
      background:var(--section);
    }
    .mini-metric{
      flex:1 1 160px;
      background:linear-gradient(135deg, #f8fbff, #dbeafe);
      color:#0f172a;
      border:2px solid var(--primary);
      padding:.85rem;
      transform:translateY(-8px);
    }
    .mini-metric strong{
      display:block;
      font-size:1.45rem;
      line-height:1;
    }
    .features-layout{
      display:flex;
      flex-wrap:wrap;
      gap:1rem;
      padding:1rem;
      background:linear-gradient(135deg, rgba(30,41,59,.96), rgba(30,41,59,.92));
    }
    .features-aside{
      flex:0 1 270px;
      background:linear-gradient(180deg, #f8fbff, #eef6ff);
      color:#0f172a;
      border:3px solid var(--primary);
      padding:1rem;
      align-self:stretch;
    }
    .features-aside h2{
      font-size:2rem;
      font-weight:900;
      line-height:.95;
      margin:0 0 .75rem 0;
      text-transform:uppercase;
    }
    .feature-grid{
      flex:1 1 500px;
      display:flex;
      flex-wrap:wrap;
      gap:.85rem;
    }
    .feature-card{
      flex:1 1 220px;
      background:linear-gradient(135deg, #f8fbff 0%, #eff6ff 100%);
      color:#0f172a;
      border:3px solid var(--primary);
      padding:1rem;
      min-height:170px;
      transition:transform .28s ease, box-shadow .28s ease;
    }
    .feature-card:hover{
      transform:scale(1.04);
      box-shadow:8px 8px 0 rgba(56,189,248,.22);
    }
    .feature-card h3{
      margin:0 0 .5rem 0;
      font-size:1.2rem;
      font-weight:900;
      text-transform:uppercase;
    }
    .feature-tag{
      display:inline-block;
      margin-bottom:.55rem;
      padding:.2rem .45rem;
      background:var(--primary);
      color:#0f172a;
      font-weight:800;
      font-size:.78rem;
    }
    .content-zone{
      padding:1rem;
      background:linear-gradient(180deg, rgba(30,41,59,.97), rgba(30,41,59,.92));
    }
    .content-head{
      display:flex;
      flex-wrap:wrap;
      align-items:end;
      justify-content:space-between;
      gap:.75rem;
      margin-bottom:1rem;
    }
    .content-head h2{
      margin:0;
      color:#ffffff;
      font-size:2.4rem;
      line-height:.95;
      font-weight:900;
      text-transform:uppercase;
      max-width:12ch;
    }
    .content-head p{
      margin:0;
      color:var(--text);
      max-width:56ch;
    }
    .cards-flex{
      display:flex;
      flex-wrap:wrap;
      gap:1rem;
      align-items:stretch;
    }
    .post-card{
      flex:1 1 calc(50% - 1rem);
      min-width:280px;
      background:linear-gradient(135deg, #f8fbff 0%, #eef6ff 60%, #f1f5f9 100%);
      color:#0f172a;
      border:3px solid var(--primary);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      transition:transform .3s ease, box-shadow .3s ease;
      position:relative;
    }
    .post-card:hover{
      transform:scale(1.03);
      box-shadow:10px 10px 0 rgba(56,189,248,.22);
    }
    .post-card:hover .post-image img{
      transform:scale(1.08);
    }
    .post-image{
      height:220px;
      overflow:hidden;
      background:#dbeafe;
    }
    .post-image img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      box-shadow:0 12px 28px rgba(15,23,42,.20);
      transition:transform .45s ease;
    }
    .post-body{
      padding:1rem;
      display:flex;
      flex-direction:column;
      gap:.75rem;
      height:100%;
    }
    .post-title{
      font-size:1.25rem;
      line-height:1.05;
      font-weight:900;
      margin:0;
      text-transform:uppercase;
    }
    .post-excerpt{
      margin:0;
      line-height:1.55;
      color:#1e293b;
      flex-grow:1;
    }
    .post-link{
      align-self:flex-start;
      text-decoration:none;
    }
    .footer-grid{
      display:flex;
      flex-wrap:wrap;
      gap:1rem;
      padding:1rem;
      background:linear-gradient(180deg, rgba(30,41,59,.98), rgba(15,23,42,.98));
      color:var(--text);
    }
    .footer-col{
      flex:1 1 220px;
      background:rgba(255,255,255,.03);
      border:2px solid rgba(56,189,248,.55);
      padding:1rem;
    }
    .footer-col h3{
      margin:0 0 .75rem 0;
      font-size:1.05rem;
      font-weight:900;
      text-transform:uppercase;
      color:#ffffff;
    }
    .footer-col a{
      color:var(--text);
      text-decoration:none;
    }
    .footer-col a:hover{
      color:var(--primary);
    }
    .footer-list{
      list-style:none;
      padding:0;
      margin:0;
    }
    .footer-list li{
      margin-bottom:.45rem;
    }
    .footer-bottom{
      margin-top:.8rem;
      font-size:.9rem;
      color:var(--text);
    }
    .mobile-topbar{
      display:none;
      position:sticky;
      top:0;
      z-index:30;
      background:rgba(15,23,42,.96);
      border-bottom:3px solid var(--primary);
      padding:.75rem 1rem;
      color:#ffffff;
      align-items:center;
      justify-content:space-between;
    }
    .mobile-brand{
      font-size:1.15rem;
      font-weight:900;
      text-transform:uppercase;
    }
    .mobile-links{
      display:flex;
      gap:.5rem;
      flex-wrap:wrap;
    }
    .mobile-links a{
      color:var(--text);
      border:1px solid var(--primary);
      padding:.35rem .55rem;
      text-decoration:none;
      font-size:.84rem;
      font-weight:800;
      text-transform:uppercase;
    }
    @media screen and (max-width: 1023px){
      .sidebar{
        display:none;
      }
      .mobile-topbar{
        display:flex;
      }
      .main-content{
        padding:.75rem;
      }
      .post-card{
        flex:1 1 100%;
      }
    }
    @media screen and (max-width: 768px){
      .hero-copy,
      .hero-media{
        flex:1 1 100%;
      }
      .hero-title{
        max-width:none;
      }
      .content-head h2{
        max-width:none;
      }
      .features-aside,
      .feature-grid{
        flex:1 1 100%;
      }
      .mini-metric{
        flex:1 1 100%;
      }
    }