:root{
      --bg0:#060b16;            /* deep blueprint navy */
      --bg1:#0a1330;
      --panel:#0b1738;
      --panel2:#091226;
      --graph:#0f172a;          /* graphite */
      --ink:#e6eefc;
      --muted:#9ab0d6;

      --cyan:#21e6ff;           /* electric cyan */
      --cyan2:#49b7ff;
      --green:#35f29a;          /* signal green */
      --amber:#ffb020;          /* warning amber */
      --amber2:#ffd28a;

      --line:rgba(33,230,255,.36);
      --line2:rgba(154,176,214,.18);
      --grid:rgba(33,230,255,.08);

      --radius:16px;
      --radius2:12px;
      --shadow: 0 18px 50px rgba(0,0,0,.55);
      --shadow2: 0 10px 30px rgba(0,0,0,.45);
      --glow: 0 0 0 1px rgba(33,230,255,.28), 0 0 24px rgba(33,230,255,.12);
      --glow-amber: 0 0 0 1px rgba(255,176,32,.35), 0 0 22px rgba(255,176,32,.16);

      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      --tracking: .08em;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      color:var(--ink);
      font-family:var(--sans);
      background:
        radial-gradient(1200px 800px at 20% 10%, rgba(33,230,255,.09), transparent 55%),
        radial-gradient(900px 650px at 80% 20%, rgba(73,183,255,.06), transparent 60%),
        radial-gradient(1100px 900px at 50% 85%, rgba(53,242,154,.05), transparent 55%),
        linear-gradient(180deg, var(--bg0), #040814 70%, #030613);
      overflow-x:hidden;
    }

    /* blueprint texture + faint grid overlay */
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(transparent 0, transparent 23px, rgba(33,230,255,.08) 24px, transparent 25px),
        linear-gradient(90deg, transparent 0, transparent 23px, rgba(33,230,255,.08) 24px, transparent 25px),
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.04), transparent 55%),
        radial-gradient(circle at 70% 60%, rgba(255,255,255,.03), transparent 55%);
      background-size:24px 24px, 24px 24px, 900px 900px, 1100px 1100px;
      mix-blend-mode:screen;
      opacity:.55;
    }

    a{color:inherit}
    img{max-width:100%; height:auto; display:block}

    .wrap{
      width:min(1200px, calc(100% - 2rem));
      margin-inline:auto;
    }

    /* focus */
    :focus-visible{
      outline:2px solid var(--cyan);
      outline-offset:3px;
      border-radius:10px;
    }

    /* HEADER */
    header{
      position:sticky;
      top:0;
      z-index:60;
      background:
        linear-gradient(180deg, rgba(6,11,22,.86), rgba(6,11,22,.62));
      backdrop-filter: blur(10px);
      border-bottom:1px solid rgba(33,230,255,.18);
    }

    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:.85rem 0;
    }

    .brand{
      display:flex;
      align-items:flex-start;
      gap:.85rem;
      min-width: 220px;
    }
    .mark{
      width:42px; height:42px;
      border-radius:14px;
      position:relative;
      background:
        linear-gradient(135deg, rgba(33,230,255,.16), rgba(33,230,255,.02)),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
      border:1px solid rgba(33,230,255,.35);
      box-shadow: var(--glow);
    }
    .mark::before{
      content:"";
      position:absolute;
      inset:9px;
      border-radius:12px;
      border:1px dashed rgba(33,230,255,.5);
      opacity:.9;
    }
    .mark::after{
      content:"";
      position:absolute;
      left:50%; top:50%;
      width:10px; height:10px;
      transform:translate(-50%,-50%);
      border-radius:999px;
      background:rgba(33,230,255,.9);
      box-shadow:0 0 0 5px rgba(33,230,255,.12), 0 0 18px rgba(33,230,255,.25);
    }

    .brand .title{
      line-height:1.05;
      margin:0;
      font-size:1rem;
      letter-spacing: var(--tracking);
      text-transform:uppercase;
      font-weight:800;
    }
    .brand .sub{
      margin:.25rem 0 0;
      font-family:var(--mono);
      color:var(--muted);
      font-size:.78rem;
      letter-spacing:.06em;
    }

    /* Burger + nav (CSS-only) */
    .navshell{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:1rem;
      flex:1;
    }

    #nav-toggle{
      position:absolute;
      width:1px; height:1px;
      overflow:hidden;
      clip:rect(0 0 0 0);
      white-space:nowrap;
      clip-path: inset(50%);
    }
    .burger{
      display:inline-flex;
      align-items:center;
      gap:.7rem;
      padding:.65rem .9rem;
      border-radius:14px;
      border:1px solid rgba(33,230,255,.35);
      background:
        linear-gradient(180deg, rgba(11,23,56,.8), rgba(9,18,38,.7));
      color:var(--ink);
      box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset, var(--glow);
      cursor:pointer;
      user-select:none;
      font-family:var(--mono);
      text-transform:uppercase;
      letter-spacing:.08em;
      font-size:.78rem;
      transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
    }
    .burger:hover{transform:translateY(-1px); border-color:rgba(33,230,255,.55)}
    .burger .lines{
      width:18px; height:12px; position:relative; display:inline-block;
    }
    .burger .lines span{
      position:absolute; left:0; right:0;
      height:2px; border-radius:2px;
      background:linear-gradient(90deg, rgba(33,230,255,.9), rgba(73,183,255,.6));
      transition: transform .35s ease, top .35s ease, opacity .35s ease;
      box-shadow:0 0 16px rgba(33,230,255,.15);
    }
    .burger .lines span:nth-child(1){top:0}
    .burger .lines span:nth-child(2){top:5px}
    .burger .lines span:nth-child(3){top:10px}

    /* required rule: nav contains only ul li a */
    nav{display:none}
    nav ul{
      list-style:none;
      margin:0;
      padding:0;
      display:flex;
      flex-direction:column;
      gap:.25rem;
    }
    nav a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:.8rem .9rem;
      border-radius:14px;
      text-decoration:none;
      color:var(--ink);
      border:1px solid rgba(33,230,255,.22);
      background:linear-gradient(180deg, rgba(11,23,56,.74), rgba(9,18,38,.66));
      box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
      transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
      font-family:var(--mono);
      letter-spacing:.06em;
      text-transform:uppercase;
      font-size:.82rem;
    }
    nav a:hover{
      transform:translateY(-1px);
      border-color:rgba(33,230,255,.55);
      box-shadow: var(--glow);
      background:linear-gradient(180deg, rgba(11,23,56,.88), rgba(9,18,38,.74));
    }
    nav a span{
      color:var(--muted);
      font-size:.78rem;
      text-decoration: underline;
      text-decoration-color: rgba(33,230,255,.45);
      text-underline-offset: .22em;
    }

    .navpanel{
      display:none;
      padding:0 0 1rem;
    }

    #nav-toggle:checked ~ .navpanel{
      display:block;
    }
    #nav-toggle:checked + label .lines span:nth-child(1){top:5px; transform:rotate(45deg)}
    #nav-toggle:checked + label .lines span:nth-child(2){opacity:0}
    #nav-toggle:checked + label .lines span:nth-child(3){top:5px; transform:rotate(-45deg)}

    .top-actions{
      display:none;
      gap:.6rem;
      align-items:center;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      padding:.72rem .95rem;
      border-radius:14px;
      border:1px solid rgba(33,230,255,.38);
      background:linear-gradient(180deg, rgba(11,23,56,.68), rgba(9,18,38,.62));
      color:var(--ink);
      text-decoration:none;
      font-family:var(--mono);
      text-transform:uppercase;
      letter-spacing:.08em;
      font-size:.8rem;
      box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
      transition: transform .35s ease, box-shadow .4s ease, border-color .35s ease, background .35s ease;
      cursor:pointer;
    }
    .btn:hover{
      transform:translateY(-1px);
      border-color:rgba(33,230,255,.65);
      box-shadow: var(--glow);
      background:linear-gradient(180deg, rgba(11,23,56,.82), rgba(9,18,38,.7));
    }
    .btn .led{
      width:9px; height:9px; border-radius:999px;
      background:rgba(33,230,255,.9);
      box-shadow:0 0 0 4px rgba(33,230,255,.14), 0 0 18px rgba(33,230,255,.22);
    }

    .btn.critical{
      border-color: rgba(255,176,32,.52);
      background: linear-gradient(180deg, rgba(255,176,32,.18), rgba(11,23,56,.55));
    }
    .btn.critical:hover{
      border-color: rgba(255,176,32,.78);
      box-shadow: var(--glow-amber);
    }
    .btn.critical .led{ background: rgba(255,176,32,.95); box-shadow:0 0 0 4px rgba(255,176,32,.14), 0 0 18px rgba(255,176,32,.22); }

    /* HERO */
    .hero{
      padding: 1.25rem 0 1.4rem;
    }
    .hero-grid{
      display:grid;
      gap:1rem;
      align-items:stretch;
    }
    .hero-panel{
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, rgba(11,23,56,.78), rgba(9,18,38,.72)),
        radial-gradient(1200px 500px at 10% 10%, rgba(33,230,255,.12), transparent 60%),
        radial-gradient(900px 500px at 90% 40%, rgba(53,242,154,.06), transparent 55%);
      border:1px solid rgba(33,230,255,.22);
      box-shadow: var(--shadow2);
      position:relative;
      overflow:hidden;
    }
    .hero-panel::before{
      content:"";
      position:absolute;
      inset:-2px;
      background:
        linear-gradient(90deg, transparent 0, rgba(33,230,255,.18) 8%, transparent 16%) 0 0/ 260px 100%,
        linear-gradient(180deg, transparent 0, rgba(33,230,255,.12) 10%, transparent 20%) 0 0/ 100% 220px;
      opacity:.35;
      pointer-events:none;
    }

    .hero-inner{
      padding:1.2rem 1.1rem;
      display:grid;
      gap:1rem;
    }

    .kicker{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      align-items:center;
      font-family:var(--mono);
      color:var(--muted);
      letter-spacing:.06em;
      text-transform:uppercase;
      font-size:.82rem;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.3rem .55rem;
      border-radius:999px;
      border:1px dashed rgba(33,230,255,.42);
      background: rgba(6,11,22,.28);
    }
    .tag i{
      width:8px; height:8px; border-radius:999px; display:inline-block;
      background: var(--green);
      box-shadow: 0 0 0 4px rgba(53,242,154,.12), 0 0 14px rgba(53,242,154,.18);
    }
    .tag.warn i{ background: var(--amber); box-shadow:0 0 0 4px rgba(255,176,32,.14), 0 0 14px rgba(255,176,32,.2); }

    .hero h1{
      margin:.15rem 0 0;
      font-size: clamp(1.55rem, 3.2vw, 2.75rem);
      letter-spacing: .06em;
      text-transform:uppercase;
      line-height:1.08;
      font-weight: 900;
    }
    .hero h1 small{
      display:block;
      margin-top:.55rem;
      font-size: .78em;
      color: var(--muted);
      font-weight: 700;
      letter-spacing: .09em;
      font-family: var(--mono);
      text-transform:uppercase;
    }

    .hero p{
      margin:.25rem 0 0;
      color: rgba(230,238,252,.86);
      max-width: 70ch;
      font-size:1rem;
      line-height:1.6;
    }

    .hero-cta{
      display:flex;
      flex-wrap:wrap;
      gap:.65rem;
      align-items:center;
      margin-top:.3rem;
    }

    .meta-strip{
      margin-top:.4rem;
      display:grid;
      gap:.5rem;
      grid-template-columns:1fr;
    }
    .meta{
      border-radius: 14px;
      border:1px solid rgba(154,176,214,.16);
      background:linear-gradient(180deg, rgba(6,11,22,.35), rgba(6,11,22,.22));
      padding:.7rem .8rem;
      display:flex;
      justify-content:space-between;
      gap:1rem;
      font-family:var(--mono);
      letter-spacing:.04em;
      color:var(--muted);
      box-shadow: 0 0 0 1px rgba(0,0,0,.18) inset;
    }
    .meta b{color:var(--ink); font-weight:800; letter-spacing:.08em}

    /* Simple CSS slider (no JS), <= 600px height */
    .slider{
      border-radius: var(--radius);
      border:1px solid rgba(33,230,255,.22);
      background: linear-gradient(180deg, rgba(11,23,56,.55), rgba(9,18,38,.55));
      box-shadow: var(--shadow2);
      overflow:hidden;
      position:relative;
      max-height: 600px;
      height: min(52vh, 560px);
    }
    .slides{
      height:100%;
      width:300%;
      display:flex;
      animation: slide 18s infinite;
    }
    .slide{
      width:100%;
      position:relative;
      display:grid;
      grid-template-rows: 1fr auto;
      min-height:100%;
    }
    .slide img{
      width:100%;
      height:100%;
      object-fit:cover;
      filter: saturate(.85) contrast(1.08) brightness(.9);
      opacity:.92;
    }
    .slide::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(6,11,22,.12), rgba(6,11,22,.82)),
        repeating-linear-gradient(90deg, rgba(33,230,255,.0) 0, rgba(33,230,255,.0) 16px, rgba(33,230,255,.08) 17px, rgba(33,230,255,.0) 18px),
        radial-gradient(700px 420px at 30% 30%, rgba(33,230,255,.15), transparent 60%);
      pointer-events:none;
    }
    .caption{
      position:absolute;
      left:0; right:0; bottom:0;
      padding: .9rem 1rem 1rem;
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:1rem;
    }
    .cap-left{
      max-width: 70%;
    }
    .cap-title{
      margin:0;
      font-family:var(--mono);
      text-transform:uppercase;
      letter-spacing:.09em;
      font-weight:900;
      font-size:.95rem;
    }
    .cap-sub{
      margin:.35rem 0 0;
      color:rgba(230,238,252,.78);
      font-size:.95rem;
      line-height:1.45;
    }
    .cap-right{
      display:flex;
      flex-direction:column;
      gap:.35rem;
      align-items:flex-end;
      font-family:var(--mono);
      color:var(--muted);
      font-size:.78rem;
      text-transform:uppercase;
      letter-spacing:.08em;
    }
    .ticks{
      display:flex;
      gap:.35rem;
      align-items:center;
    }
    .ticks span{
      width:14px; height:4px; border-radius:10px;
      background:rgba(154,176,214,.28);
      border:1px solid rgba(154,176,214,.18);
    }
    .ticks span.active{
      background:rgba(33,230,255,.75);
      border-color:rgba(33,230,255,.35);
      box-shadow:0 0 16px rgba(33,230,255,.2);
    }
    @keyframes slide{
      0%, 26%{transform:translateX(0)}
      33%, 59%{transform:translateX(-33.3333%)}
      66%, 92%{transform:translateX(-66.6666%)}
      100%{transform:translateX(0)}
    }

    /* SECTIONS */
    main{padding: .75rem 0 2.4rem}
    section{
      margin-top: 1.2rem;
    }
    .sec-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:.8rem;
    }
    .sec-head h2{
      margin:0;
      font-size:1.15rem;
      letter-spacing:.1em;
      text-transform:uppercase;
      font-weight:900;
    }
    .sec-head p{
      margin:0;
      color:var(--muted);
      font-family:var(--mono);
      font-size:.85rem;
      letter-spacing:.06em;
      text-transform:uppercase;
    }

    .cards{
      display:grid;
      grid-template-columns:1fr;
      gap:.8rem;
    }

    article.card{
      border-radius: var(--radius);
      overflow:hidden;
      border:1px solid rgba(33,230,255,.2);
      background:
        linear-gradient(180deg, rgba(11,23,56,.72), rgba(9,18,38,.66));
      box-shadow: 0 0 0 1px rgba(0,0,0,.22) inset;
      transition: transform .45s ease, border-color .45s ease, box-shadow .55s ease, background .45s ease;
      position:relative;
    }
    article.card:hover{
      transform: translateY(-3px);
      border-color: rgba(33,230,255,.55);
      box-shadow: var(--glow);
    }
    .card .thumb{
      position:relative;
      aspect-ratio: 16/9;
      overflow:hidden;
      background:rgba(6,11,22,.3);
    }
    .card .thumb img{
      width:100%; height:100%;
      object-fit:cover;
      filter: grayscale(.15) contrast(1.06) brightness(.92);
      transform: scale(1.01);
      transition: transform .6s ease, filter .6s ease;
    }
    .card:hover .thumb img{transform:scale(1.06); filter: grayscale(.05) contrast(1.08) brightness(.98)}
    .card .thumb::after{
      content:"";
      position:absolute; inset:0;
      background:
        linear-gradient(180deg, rgba(0,0,0,.02), rgba(6,11,22,.68)),
        repeating-linear-gradient(90deg, rgba(33,230,255,.0) 0, rgba(33,230,255,.0) 19px, rgba(33,230,255,.08) 20px, rgba(33,230,255,.0) 21px);
      opacity:.85;
    }

    .card .body{
      padding: .9rem .95rem 1rem;
      display:grid;
      gap:.6rem;
    }
    .card .label{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.9rem;
      font-family:var(--mono);
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:.08em;
      font-size:.78rem;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.28rem .55rem;
      border-radius:999px;
      border:1px dashed rgba(33,230,255,.42);
      background: rgba(6,11,22,.22);
      white-space:nowrap;
    }
    .chip .dot{
      width:8px; height:8px; border-radius:999px;
      background: rgba(33,230,255,.9);
      box-shadow: 0 0 0 4px rgba(33,230,255,.12);
    }

    .card h3{
      margin:0;
      font-size:1.02rem;
      letter-spacing:.05em;
      text-transform:uppercase;
      line-height:1.25;
      font-weight:900;
    }
    .card p{
      margin:0;
      color:rgba(230,238,252,.82);
      line-height:1.58;
      font-size:.96rem;
    }
    .card .actions{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.8rem;
      margin-top:.1rem;
    }
    .link{
      font-family:var(--mono);
      text-transform:uppercase;
      letter-spacing:.08em;
      font-size:.82rem;
      text-decoration: underline;
      text-decoration-color: rgba(33,230,255,.55);
      text-underline-offset: .22em;
      color: var(--ink);
      transition: color .35s ease, text-decoration-color .35s ease;
    }
    .link:hover{color:rgba(33,230,255,.95); text-decoration-color: rgba(33,230,255,.95)}
    .link.secondary{
      text-decoration-style:dotted;
      color:var(--muted);
    }

    /* Section individuality */
    .sec-a article.card{
      background:
        linear-gradient(180deg, rgba(11,23,56,.76), rgba(9,18,38,.70));
    }
    .sec-a article.card::before{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(90deg, rgba(33,230,255,.12), transparent 35%, transparent 65%, rgba(33,230,255,.06));
      opacity:.25;
      pointer-events:none;
    }

    .sec-b article.card{
      border-color: rgba(154,176,214,.16);
      background:
        linear-gradient(180deg, rgba(10,19,48,.72), rgba(9,18,38,.66));
    }
    .sec-b article.card:hover{
      border-color: rgba(53,242,154,.55);
      box-shadow: 0 0 0 1px rgba(53,242,154,.22), 0 0 26px rgba(53,242,154,.14);
    }
    .sec-b .chip{border-color: rgba(53,242,154,.42)}
    .sec-b .chip .dot{background: rgba(53,242,154,.92); box-shadow:0 0 0 4px rgba(53,242,154,.14)}

    .sec-c article.card{
      border-color: rgba(255,176,32,.18);
      background:
        linear-gradient(180deg, rgba(11,23,56,.68), rgba(9,18,38,.64));
    }
    .sec-c article.card:hover{
      border-color: rgba(255,176,32,.62);
      box-shadow: var(--glow-amber);
    }
    .sec-c .chip{border-color: rgba(255,176,32,.44)}
    .sec-c .chip .dot{background: rgba(255,176,32,.95); box-shadow:0 0 0 4px rgba(255,176,32,.14)}
    .sec-c .link:hover{color: rgba(255,210,138,.95); text-decoration-color: rgba(255,176,32,.92)}

    /* Blog list block */
    .block{
      margin-top: 1.3rem;
      border-radius: var(--radius);
      border:1px solid rgba(33,230,255,.18);
      background: linear-gradient(180deg, rgba(11,23,56,.56), rgba(9,18,38,.52));
      box-shadow: var(--shadow2);
      overflow:hidden;
    }
    .block-h{
      padding: .95rem 1rem;
      display:flex;
      justify-content:space-between;
      gap:1rem;
      align-items:flex-end;
      border-bottom: 1px solid rgba(33,230,255,.14);
      background:
        linear-gradient(180deg, rgba(6,11,22,.18), rgba(6,11,22,.06));
    }
    .block-h h2, .block-h h3{
      margin:0;
      letter-spacing:.1em;
      text-transform:uppercase;
      font-weight:900;
      font-size:1.05rem;
    }
    .block-h .hint{
      margin:0;
      color:var(--muted);
      font-family:var(--mono);
      font-size:.82rem;
      letter-spacing:.06em;
      text-transform:uppercase;
      text-align:right;
    }

    .bloglist{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      gap:0;
    }
    .bloglist li{
      border-top: 1px solid rgba(154,176,214,.12);
    }
    .bloglist li:first-child{border-top:0}
    .bloglist a{
      display:grid;
      grid-template-columns: 110px 1fr;
      gap:.9rem;
      padding: .9rem 1rem;
      text-decoration:none;
      align-items:center;
      transition: background .35s ease, transform .35s ease, box-shadow .45s ease;
    }
    .bloglist a:hover{
      background: rgba(33,230,255,.06);
      box-shadow: 0 0 0 1px rgba(33,230,255,.14) inset;
    }
    .bloglist img{
      width:110px;
      height:74px;
      object-fit:cover;
      border-radius: 14px;
      border:1px solid rgba(33,230,255,.22);
      filter: saturate(.85) contrast(1.05) brightness(.92);
    }
    .blogmeta{
      display:grid;
      gap:.35rem;
    }
    .blogmeta strong{
      font-family:var(--mono);
      text-transform:uppercase;
      letter-spacing:.08em;
      font-weight:900;
      font-size:.92rem;
      line-height:1.25;
    }
    .blogmeta span{
      color:var(--muted);
      font-family:var(--mono);
      letter-spacing:.06em;
      text-transform:uppercase;
      font-size:.78rem;
    }

    /* Content block (centered) */
    .content{
      margin-top: 1.3rem;
      padding: 1.05rem;
      border-radius: var(--radius);
      border:1px solid rgba(33,230,255,.18);
      background:
        linear-gradient(180deg, rgba(11,23,56,.62), rgba(9,18,38,.56));
      box-shadow: var(--shadow2);
    }
    .content .center{
      max-width: 860px;
      margin: 0 auto;
    }
    .center-figure{
      border-radius: var(--radius);
      border:1px solid rgba(33,230,255,.22);
      background: rgba(6,11,22,.25);
      overflow:hidden;
      position:relative;
      box-shadow: 0 0 0 1px rgba(0,0,0,.22) inset;
    }
    .center-figure img{
      width:100%;
      height:auto;
      filter: grayscale(.08) contrast(1.08) brightness(.92);
    }
    .center-figure::after{
      content:"";
      position:absolute; inset:0;
      background:
        linear-gradient(180deg, rgba(0,0,0,0), rgba(6,11,22,.35)),
        repeating-linear-gradient(90deg, rgba(33,230,255,.0) 0, rgba(33,230,255,.0) 21px, rgba(33,230,255,.08) 22px, rgba(33,230,255,.0) 23px);
      pointer-events:none;
      opacity:.8;
    }

    .rating{
      margin:.9rem 0 0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      border-radius:14px;
      padding:.75rem .9rem;
      border:1px dashed rgba(33,230,255,.35);
      background: rgba(6,11,22,.2);
      font-family:var(--mono);
      text-transform:uppercase;
      letter-spacing:.08em;
      color:var(--muted);
    }
    .rating b{
      color:var(--ink);
      letter-spacing:.1em;
    }
    .scale{
      display:flex;
      gap:.4rem;
      align-items:center;
    }
    .scale i{
      width:10px; height:10px; border-radius:999px;
      background: rgba(33,230,255,.25);
      border:1px solid rgba(33,230,255,.22);
    }
    .scale i.on{
      background: rgba(33,230,255,.9);
      box-shadow:0 0 14px rgba(33,230,255,.22);
    }

    hr.divider{
      border:0;
      height:1px;
      margin: 1.05rem 0;
      background: linear-gradient(90deg, transparent, rgba(33,230,255,.35), rgba(154,176,214,.12), transparent);
    }

    article.read{
      border-radius: var(--radius);
      border:1px solid rgba(154,176,214,.16);
      background: linear-gradient(180deg, rgba(6,11,22,.18), rgba(6,11,22,.08));
      padding: 1rem;
      box-shadow: 0 0 0 1px rgba(0,0,0,.18) inset;
    }
    article.read h1{
      margin:0;
      font-size: clamp(1.25rem, 2.4vw, 1.85rem);
      letter-spacing:.08em;
      text-transform:uppercase;
      line-height:1.15;
      font-weight: 950;
    }
    .byline{
      margin:.6rem 0 0;
      display:flex;
      flex-wrap:wrap;
      gap:.6rem 1rem;
      align-items:center;
      font-family:var(--mono);
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:.06em;
      font-size:.82rem;
      border-top:1px solid rgba(154,176,214,.14);
      padding-top:.7rem;
    }
    .byline .sep{opacity:.5}
    .read .bodytext{
      margin-top:.85rem;
      color: rgba(230,238,252,.86);
      line-height:1.7;
      font-size:1rem;
    }
    .read .bodytext p{margin:.8rem 0}
    .read .note{
      border-left: 3px solid rgba(255,176,32,.8);
      background:
        linear-gradient(90deg, rgba(255,176,32,.12), rgba(6,11,22,.12));
      padding:.8rem .85rem;
      border-radius: 12px;
      margin: .95rem 0;
      box-shadow: 0 0 0 1px rgba(255,176,32,.14) inset;
    }
    .read .note b{
      font-family:var(--mono);
      text-transform:uppercase;
      letter-spacing:.08em;
      color: var(--amber2);
    }

    .prevnext{
      display:flex;
      flex-wrap:wrap;
      gap:.6rem;
      justify-content:space-between;
      margin-top:.9rem;
    }
    .prevnext a{
      flex:1 1 260px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:1rem;
      padding:.85rem .95rem;
      border-radius:14px;
      border:1px solid rgba(33,230,255,.22);
      background: linear-gradient(180deg, rgba(11,23,56,.45), rgba(9,18,38,.45));
      text-decoration:none;
      transition: transform .35s ease, box-shadow .5s ease, border-color .35s ease;
      font-family:var(--mono);
      text-transform:uppercase;
      letter-spacing:.08em;
    }
    .prevnext a:hover{transform:translateY(-2px); border-color:rgba(33,230,255,.55); box-shadow: var(--glow)}
    .prevnext small{color:var(--muted); font-size:.78rem}
    .prevnext strong{font-size:.88rem}

    /* Comments */
    .comments{
      margin-top: 1.1rem;
      border-radius: var(--radius);
      border:1px solid rgba(33,230,255,.16);
      background: linear-gradient(180deg, rgba(6,11,22,.16), rgba(6,11,22,.08));
      padding: 1rem;
    }
    .comments h2{
      margin:0;
      letter-spacing:.1em;
      text-transform:uppercase;
      font-weight:950;
      font-size:1.05rem;
    }
    .comments .empty{
      margin:.75rem 0 0;
      padding:.85rem;
      border-radius:14px;
      border:1px dashed rgba(154,176,214,.22);
      color:var(--muted);
      font-family:var(--mono);
      letter-spacing:.06em;
      text-transform:uppercase;
      background: rgba(6,11,22,.18);
    }
    form.comment-form{
      margin-top:.95rem;
      display:grid;
      gap:.75rem;
    }
    .grid2{
      display:grid;
      gap:.75rem;
      grid-template-columns:1fr;
    }
    label{
      display:grid;
      gap:.4rem;
      font-family:var(--mono);
      letter-spacing:.06em;
      text-transform:uppercase;
      font-size:.78rem;
      color:var(--muted);
    }
    input, textarea{
      width:100%;
      border-radius:14px;
      border:1px solid rgba(33,230,255,.22);
      background: rgba(6,11,22,.35);
      color:var(--ink);
      padding:.8rem .85rem;
      font: inherit;
      box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
      transition: border-color .35s ease, box-shadow .45s ease, transform .35s ease;
    }
    textarea{min-height:120px; resize:vertical}
    input:focus-visible, textarea:focus-visible{
      border-color: rgba(33,230,255,.7);
      box-shadow: var(--glow);
    }

    /* Related */
    .related{
      margin-top: 1.1rem;
    }
    .related-grid{
      display:grid;
      gap:.8rem;
      grid-template-columns:1fr;
      margin-top:.8rem;
    }
    .rel{
      border-radius: var(--radius);
      border:1px solid rgba(154,176,214,.16);
      background: linear-gradient(180deg, rgba(11,23,56,.46), rgba(9,18,38,.46));
      overflow:hidden;
      transition: transform .35s ease, border-color .35s ease, box-shadow .5s ease;
    }
    .rel:hover{transform:translateY(-3px); border-color:rgba(33,230,255,.5); box-shadow: var(--glow)}
    .rel a{
      text-decoration:none;
      display:grid;
      grid-template-columns: 120px 1fr;
      gap:.85rem;
      align-items:center;
      padding:.85rem;
    }
    .rel img{
      width:120px; height:76px;
      object-fit:cover;
      border-radius:14px;
      border:1px solid rgba(33,230,255,.22);
      filter: saturate(.85) contrast(1.06) brightness(.92);
    }
    .rel strong{
      display:block;
      font-family:var(--mono);
      text-transform:uppercase;
      letter-spacing:.08em;
      font-size:.9rem;
      line-height:1.25;
    }
    .rel span{
      display:block;
      margin-top:.35rem;
      color:var(--muted);
      font-family:var(--mono);
      letter-spacing:.06em;
      text-transform:uppercase;
      font-size:.78rem;
    }

    /* Contacts */
    .contacts{
      margin-top: 1.3rem;
      padding: 1.05rem;
      border-radius: var(--radius);
      border:1px solid rgba(33,230,255,.18);
      background: linear-gradient(180deg, rgba(11,23,56,.56), rgba(9,18,38,.52));
      box-shadow: var(--shadow2);
    }
    .contacts-grid{
      display:grid;
      gap:1rem;
      grid-template-columns:1fr;
      margin-top:.9rem;
    }
    .panel{
      border-radius: var(--radius);
      border:1px solid rgba(154,176,214,.14);
      background: linear-gradient(180deg, rgba(6,11,22,.18), rgba(6,11,22,.08));
      padding: 1rem;
      box-shadow: 0 0 0 1px rgba(0,0,0,.18) inset;
    }
    .panel h3{
      margin:0;
      font-family:var(--mono);
      letter-spacing:.1em;
      text-transform:uppercase;
      font-weight:950;
      font-size:1rem;
    }
    .panel p{margin:.75rem 0 0; color:rgba(230,238,252,.84); line-height:1.65}
    address{
      margin-top:.75rem;
      font-style:normal;
      color:var(--muted);
      font-family:var(--mono);
      letter-spacing:.06em;
      text-transform:uppercase;
      font-size:.85rem;
      line-height:1.7;
    }
    .map{
      overflow:hidden;
      border-radius: var(--radius);
      border:1px solid rgba(33,230,255,.18);
      background: rgba(6,11,22,.25);
      min-height: 260px;
      position:relative;
    }
    .map iframe{
      width:100%;
      height:100%;
      min-height:260px;
      border:0;
      filter: grayscale(1) contrast(1.1) brightness(.75);
    }
    .map::after{
      content:"";
      position:absolute; inset:0;
      pointer-events:none;
      background:
        linear-gradient(180deg, rgba(6,11,22,.18), rgba(6,11,22,.52)),
        repeating-linear-gradient(90deg, rgba(33,230,255,0) 0, rgba(33,230,255,0) 18px, rgba(33,230,255,.08) 19px, rgba(33,230,255,0) 20px);
      opacity:.9;
    }

    /* ASIDE promos + modal */
    aside{
      margin-top: 1.2rem;
      padding: 1.05rem;
      border-radius: var(--radius);
      border:1px solid rgba(33,230,255,.18);
      background: linear-gradient(180deg, rgba(6,11,22,.22), rgba(6,11,22,.12));
      box-shadow: var(--shadow2);
    }
    .promo{
      display:grid;
      gap:.75rem;
      grid-template-columns:1fr;
    }
    .promo a{
      text-decoration:none;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:.85rem .95rem;
      border-radius:14px;
      border:1px solid rgba(33,230,255,.22);
      background: linear-gradient(180deg, rgba(11,23,56,.48), rgba(9,18,38,.46));
      transition: transform .35s ease, box-shadow .5s ease, border-color .35s ease;
      font-family:var(--mono);
      text-transform:uppercase;
      letter-spacing:.08em;
      color:var(--ink);
    }
    .promo a:hover{transform:translateY(-2px); border-color:rgba(33,230,255,.55); box-shadow: var(--glow)}
    .promo a em{
      font-style:normal;
      color:var(--muted);
      font-size:.8rem;
      letter-spacing:.06em;
      text-decoration: underline;
      text-decoration-color: rgba(33,230,255,.35);
      text-underline-offset: .2em;
    }

    /* Pure CSS modal (target) */
    .modal{
      position:fixed;
      inset:0;
      display:none;
      place-items:center;
      padding:1rem;
      z-index:80;
    }
    .modal:target{display:grid}
    .modal .backdrop{
      position:absolute; inset:0;
      background: rgba(0,0,0,.65);
      backdrop-filter: blur(6px);
    }
    .dialog{
      position:relative;
      width: min(560px, 100%);
      border-radius: var(--radius);
      border:1px solid rgba(33,230,255,.28);
      background:
        linear-gradient(180deg, rgba(11,23,56,.88), rgba(9,18,38,.84));
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .dialog header{
      position:relative;
      top:auto;
      background: transparent;
      border-bottom: 1px solid rgba(33,230,255,.16);
      backdrop-filter:none;
    }
    .dialog .dh{
      padding: .95rem 1rem;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:1rem;
    }
    .dialog h3{
      margin:0;
      font-family:var(--mono);
      text-transform:uppercase;
      letter-spacing:.1em;
      font-weight:950;
      font-size:1rem;
    }
    .dialog .close{
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:38px; height:38px;
      border-radius:14px;
      border:1px solid rgba(33,230,255,.25);
      color:var(--ink);
      background: rgba(6,11,22,.25);
      transition: transform .35s ease, box-shadow .45s ease, border-color .35s ease;
      font-family:var(--mono);
    }
    .dialog .close:hover{transform:translateY(-1px); border-color:rgba(33,230,255,.55); box-shadow: var(--glow)}
    .dialog .body{
      padding: 1rem;
    }
    .dialog .body p{
      margin:.1rem 0 .9rem;
      color:rgba(230,238,252,.82);
      line-height:1.6;
    }

    /* FOOTER */
    footer{
      margin-top: 1.5rem;
      border-top:1px solid rgba(33,230,255,.18);
      background: linear-gradient(180deg, rgba(6,11,22,.55), rgba(6,11,22,.85));
      padding: 1.25rem 0 1.6rem;
    }
    .foot{
      display:grid;
      gap:1rem;
    }
    .diag{
      border-radius: var(--radius);
      border:1px solid rgba(33,230,255,.16);
      background:
        linear-gradient(180deg, rgba(11,23,56,.38), rgba(9,18,38,.42));
      padding: .9rem 1rem;
      display:flex;
      flex-wrap:wrap;
      gap:.7rem 1rem;
      align-items:center;
      justify-content:space-between;
      font-family:var(--mono);
      text-transform:uppercase;
      letter-spacing:.08em;
      color:var(--muted);
      box-shadow: 0 0 0 1px rgba(0,0,0,.18) inset;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.35rem .6rem;
      border-radius:999px;
      border:1px dashed rgba(154,176,214,.22);
      background: rgba(6,11,22,.2);
      white-space:nowrap;
    }
    .badge i{
      width:8px; height:8px; border-radius:999px;
      background: var(--green);
      box-shadow: 0 0 0 4px rgba(53,242,154,.12), 0 0 14px rgba(53,242,154,.2);
      display:inline-block;
    }
    .badge.warn i{background: var(--amber); box-shadow:0 0 0 4px rgba(255,176,32,.14), 0 0 14px rgba(255,176,32,.2)}
    .foot-grid{
      display:grid;
      gap:1rem;
      grid-template-columns:1fr;
      align-items:start;
    }
    .slogan{
      margin:0;
      font-size:1.05rem;
      letter-spacing:.1em;
      text-transform:uppercase;
      font-weight:950;
    }
    .about{
      margin:.7rem 0 0;
      color:rgba(230,238,252,.82);
      line-height:1.7;
      max-width: 75ch;
    }
    .social{
      display:flex;
      flex-wrap:wrap;
      gap:.6rem;
      margin-top:.8rem;
    }
    .social a{
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      padding:.65rem .85rem;
      border-radius:999px;
      border:1px solid rgba(33,230,255,.22);
      background: rgba(6,11,22,.22);
      text-decoration:none;
      font-family:var(--mono);
      text-transform:uppercase;
      letter-spacing:.08em;
      font-size:.78rem;
      transition: transform .35s ease, box-shadow .45s ease, border-color .35s ease;
    }
    .social a:hover{transform:translateY(-1px); border-color:rgba(33,230,255,.55); box-shadow: var(--glow)}
    .social a i{
      width:9px; height:9px; border-radius:999px; display:inline-block;
      background: rgba(33,230,255,.9);
      box-shadow: 0 0 0 4px rgba(33,230,255,.12);
    }
    .copy{
      margin: .9rem 0 0;
      color:var(--muted);
      font-family:var(--mono);
      letter-spacing:.06em;
      text-transform:uppercase;
      font-size:.78rem;
    }

    /* Tablet */
    @media (min-width: 768px){
      .hero-grid{grid-template-columns: 1.05fr .95fr; gap:1rem}
      .hero-inner{padding:1.35rem 1.3rem}
      .meta-strip{grid-template-columns:1fr 1fr}
      .cards{grid-template-columns: repeat(2, 1fr)}
      .grid2{grid-template-columns: 1fr 1fr}
      .related-grid{grid-template-columns: repeat(2, 1fr)}
      .contacts-grid{grid-template-columns: 1.1fr .9fr}
      .promo{grid-template-columns: repeat(2, 1fr)}
      .foot-grid{grid-template-columns: 1.2fr .8fr}
      .bloglist a{grid-template-columns: 140px 1fr}
      .bloglist img{width:140px; height:86px}
    }

    /* Desktop */
    @media (min-width: 1200px){
      nav{display:block}
      .burger{display:none}
      .navpanel{display:block !important; padding:0}
      nav ul{
        flex-direction:row;
        align-items:center;
        gap:.45rem;
      }
      nav a{
        padding:.65rem .85rem;
        border-radius:999px;
        font-size:.78rem;
      }
      .top-actions{display:flex}
      .hero{padding: 1.6rem 0 1.5rem}
      .cards{grid-template-columns: repeat(3, 1fr)}
      .related-grid{grid-template-columns: repeat(3, 1fr)}
      .promo{grid-template-columns: repeat(4, 1fr)}
    }

    @media (prefers-reduced-motion: reduce){
      *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
    }