:root{
      --bg:#0a0f12;
      --panel:#0e161b;
      --panel-2:#0c1418;
      --panel-3:#101c22;
      --ink:#e7f1f2;
      --muted:#b3c3c6;
      --faint:#7f9498;

      --cyan:#23e6ff;
      --pcb:#1a8f62;
      --yellow:#ffd24a;
      --amber:#ffb14a;

      --line: rgba(231,241,242,.10);
      --line2: rgba(35,230,255,.14);
      --shadow: 0 18px 50px rgba(0,0,0,.55);
      --shadow2: 0 10px 30px rgba(0,0,0,.45);

      --r-xs: 10px;
      --r-sm: 14px;
      --r-md: 18px;

      --max: 1200px;
      --focus: 0 0 0 3px rgba(35,230,255,.28), 0 0 0 1px rgba(35,230,255,.35);
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      color:var(--ink);
      background:
        radial-gradient(1200px 800px at 20% 10%, rgba(26,143,98,.14), transparent 55%),
        radial-gradient(900px 650px at 80% 20%, rgba(35,230,255,.10), transparent 55%),
        radial-gradient(800px 700px at 50% 90%, rgba(255,210,74,.06), transparent 55%),
        linear-gradient(180deg, #081014 0%, #070c0f 60%, #06090b 100%);
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
      line-height:1.45;
      letter-spacing:.01em;
    }

    /* subtle grid + brushed texture */
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        repeating-linear-gradient(90deg, rgba(231,241,242,.04) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(0deg, rgba(231,241,242,.03) 0 1px, transparent 1px 22px),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
        radial-gradient(1200px 700px at 50% 0%, rgba(35,230,255,.06), transparent 60%);
      mix-blend-mode:overlay;
      opacity:.35;
    }

    img{ max-width:100%; height:auto; display:block; }
    a{ color:var(--cyan); text-decoration:underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
    a:hover{ color:#87f3ff; }
    a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible{
      outline:none;
      box-shadow: var(--focus);
      border-color: rgba(35,230,255,.45) !important;
    }

    .wrap{ width:min(var(--max), 92vw); margin-inline:auto; }

    /* HEADER */
    header{
      position:sticky;
      top:0;
      z-index:50;
      background:
        linear-gradient(180deg, rgba(10,15,18,.92), rgba(10,15,18,.70));
      backdrop-filter: blur(10px);
      border-bottom:1px solid rgba(231,241,242,.10);
    }

    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:12px 0;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width: 240px;
    }

    .mark{
      width:44px; height:44px;
      border-radius: 12px;
      background:
        radial-gradient(16px 16px at 70% 30%, rgba(255,210,74,.18), transparent 55%),
        radial-gradient(20px 20px at 35% 60%, rgba(35,230,255,.18), transparent 60%),
        linear-gradient(135deg, rgba(35,230,255,.20), rgba(26,143,98,.10));
      border:1px solid rgba(35,230,255,.25);
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
      position:relative;
    }

    .mark::before, .mark::after{
      content:"";
      position:absolute;
      inset:10px;
      border-radius: 9px;
      border:1px dashed rgba(35,230,255,.35);
      opacity:.8;
    }
    .mark::after{
      inset:16px;
      border-style:solid;
      border-color: rgba(231,241,242,.10);
      opacity:.9;
    }

    .brand h2{
      margin:0;
      font-size:14px;
      letter-spacing:.12em;
      text-transform:uppercase;
      font-weight:800;
      font-stretch: condensed;
      line-height:1.15;
    }
    .brand p{
      margin:0;
      color:var(--muted);
      font-size:12px;
      letter-spacing:.06em;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    }

    /* NAV — only ul/li/a inside nav */
    nav ul{
      list-style:none;
      margin:0;
      padding:0;
      display:flex;
      gap:6px;
      align-items:center;
      justify-content:flex-end;
      flex-wrap:wrap;
    }
    nav a{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 12px;
      border-radius: 12px;
      border:1px solid rgba(231,241,242,.10);
      background: linear-gradient(180deg, rgba(14,22,27,.40), rgba(14,22,27,.15));
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
      text-decoration:none;
      color:var(--ink);
      transition: transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease, color .35s ease;
      letter-spacing:.08em;
      text-transform:uppercase;
      font-size:12px;
      white-space:nowrap;
    }
    nav a:hover{
      transform: translateY(-1px);
      border-color: rgba(35,230,255,.30);
      box-shadow: inset 0 0 0 1px rgba(35,230,255,.12), 0 10px 30px rgba(0,0,0,.25);
      color:#eaffff;
    }

    /* Burger menu (CSS-only) — visible <1200px */
    .nav-shell{
      display:flex;
      align-items:center;
      gap:10px;
    }

    details.burger{
      display:block;
      position:relative;
    }
    details.burger summary{
      list-style:none;
      cursor:pointer;
      user-select:none;
      padding:10px 12px;
      border-radius: 12px;
      border:1px solid rgba(231,241,242,.12);
      background: linear-gradient(180deg, rgba(14,22,27,.55), rgba(14,22,27,.20));
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
      transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
      letter-spacing:.14em;
      text-transform:uppercase;
      font-size:12px;
      color:var(--ink);
    }
    details.burger summary::-webkit-details-marker{ display:none; }
    details.burger summary:hover{
      transform: translateY(-1px);
      border-color: rgba(35,230,255,.28);
      box-shadow: inset 0 0 0 1px rgba(35,230,255,.10), 0 12px 30px rgba(0,0,0,.25);
    }

    .menu-panel{
      position:absolute;
      right:0;
      top: calc(100% + 10px);
      width: min(520px, 86vw);
      background:
        radial-gradient(700px 260px at 30% 20%, rgba(26,143,98,.16), transparent 55%),
        linear-gradient(180deg, rgba(16,28,34,.92), rgba(10,15,18,.94));
      border: 1px solid rgba(231,241,242,.12);
      border-radius: 16px;
      box-shadow: var(--shadow2);
      padding: 10px;
    }
    .menu-panel nav ul{
      flex-direction:column;
      align-items:stretch;
      gap:8px;
    }
    .menu-panel nav a{
      justify-content:space-between;
      padding:12px 14px;
    }

    .header-actions{
      display:flex;
      align-items:center;
      gap:10px;
      justify-content:flex-end;
      min-width: 240px;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:10px 12px;
      border-radius: 12px;
      border:1px solid rgba(231,241,242,.14);
      background: linear-gradient(180deg, rgba(16,28,34,.65), rgba(16,28,34,.20));
      color:var(--ink);
      text-decoration:none;
      transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
      letter-spacing:.10em;
      text-transform:uppercase;
      font-size:12px;
      white-space:nowrap;
      position:relative;
      overflow:hidden;
    }
    .btn::after{
      content:"";
      position:absolute;
      inset:-2px;
      background: radial-gradient(350px 140px at 30% 20%, rgba(35,230,255,.16), transparent 55%);
      opacity:.0;
      transition: opacity .35s ease;
      pointer-events:none;
    }
    .btn:hover{
      transform: translateY(-1px);
      border-color: rgba(35,230,255,.30);
      box-shadow: 0 14px 36px rgba(0,0,0,.32), inset 0 0 0 1px rgba(35,230,255,.12);
    }
    .btn:hover::after{ opacity:1; }

    .btn--yellow{
      border-color: rgba(255,210,74,.24);
    }
    .btn--yellow:hover{
      border-color: rgba(255,210,74,.42);
      box-shadow: 0 14px 36px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,210,74,.14);
    }

    /* Pure CSS modal */
    .modal{
      position:fixed;
      inset:0;
      display:none;
      place-items:center;
      padding: 18px;
      background: rgba(0,0,0,.62);
      z-index:80;
    }
    .modal:target{ display:grid; }
    .modal__panel{
      width: min(760px, 92vw);
      background:
        radial-gradient(900px 420px at 20% 0%, rgba(35,230,255,.12), transparent 55%),
        radial-gradient(700px 380px at 90% 10%, rgba(26,143,98,.12), transparent 60%),
        linear-gradient(180deg, rgba(16,28,34,.96), rgba(10,15,18,.96));
      border:1px solid rgba(231,241,242,.14);
      border-radius: 18px;
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .modal__hdr{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:14px 16px;
      border-bottom:1px solid rgba(231,241,242,.12);
      background:
        linear-gradient(90deg, rgba(255,210,74,.16) 0 18px, rgba(16,28,34,.30) 18px 100%),
        linear-gradient(180deg, rgba(255,255,255,.04), transparent);
    }
    .modal__hdr h3{
      margin:0;
      letter-spacing:.14em;
      text-transform:uppercase;
      font-size:13px;
      font-weight:900;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    }
    .modal__close{
      color:var(--ink);
      text-decoration:none;
      border:1px solid rgba(231,241,242,.14);
      border-radius:12px;
      padding:8px 10px;
      background: rgba(0,0,0,.18);
      transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
      letter-spacing:.12em;
      text-transform:uppercase;
      font-size:12px;
    }
    .modal__close:hover{
      transform: translateY(-1px);
      border-color: rgba(35,230,255,.30);
      box-shadow: 0 12px 30px rgba(0,0,0,.25);
    }
    .modal__body{ padding: 16px; }
    .diag{
      display:grid;
      grid-template-columns: 1fr;
      gap:12px;
    }
    .diag .row{
      display:grid;
      grid-template-columns: 1fr;
      gap:8px;
    }
    label{
      font-size:12px;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--muted);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    }
    input, textarea{
      width:100%;
      padding:12px 12px;
      border-radius: 12px;
      border:1px solid rgba(231,241,242,.14);
      background: rgba(8,12,14,.55);
      color:var(--ink);
      transition: border-color .35s ease, box-shadow .35s ease, background .35s ease;
    }
    textarea{ min-height: 110px; resize: vertical; }
    .modal__ft{
      padding:14px 16px;
      border-top:1px solid rgba(231,241,242,.12);
      display:flex;
      gap:10px;
      justify-content:flex-end;
      flex-wrap:wrap;
    }

    /* HERO */
    .hero{
      position:relative;
      padding: 22px 0 22px;
    }
    .hero-grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 14px;
      align-items:stretch;
    }
    .hero .panel{
      background:
        radial-gradient(900px 380px at 15% 10%, rgba(26,143,98,.18), transparent 55%),
        radial-gradient(700px 320px at 80% 20%, rgba(35,230,255,.14), transparent 58%),
        linear-gradient(180deg, rgba(16,28,34,.72), rgba(10,15,18,.78));
      border:1px solid rgba(231,241,242,.12);
      border-radius: 18px;
      box-shadow: var(--shadow2);
      overflow:hidden;
      position:relative;
    }
    .hero .panel::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        repeating-linear-gradient(135deg, rgba(35,230,255,.08) 0 1px, transparent 1px 18px);
      opacity:.08;
    }

    .hero-copy{
      padding:18px 16px;
    }
    .kicker{
      display:inline-flex;
      gap:10px;
      align-items:center;
      padding:8px 10px;
      border-radius: 999px;
      border:1px solid rgba(231,241,242,.14);
      background: rgba(0,0,0,.16);
      color:var(--muted);
      font-size:12px;
      letter-spacing:.12em;
      text-transform:uppercase;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    }
    .kicker b{ color:var(--yellow); font-weight:900; letter-spacing:.14em; }

    .hero h1{
      margin:12px 0 10px;
      font-size: clamp(28px, 4.2vw, 54px);
      line-height:1.05;
      letter-spacing: .02em;
      font-weight: 900;
      text-transform:uppercase;
      font-stretch: condensed;
    }
    .hero h1 .serial{
      display:inline-block;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
      font-size: .58em;
      letter-spacing: .18em;
      color: rgba(231,241,242,.72);
      margin-left: 10px;
      vertical-align: middle;
    }
    .hero p{
      margin: 0 0 14px;
      color: var(--muted);
      max-width: 62ch;
    }

    .specs{
      display:grid;
      grid-template-columns: 1fr;
      gap:10px;
      margin-top: 14px;
    }
    .spec{
      border:1px solid rgba(231,241,242,.12);
      border-radius: 14px;
      background: rgba(8,12,14,.35);
      padding: 10px 12px;
      position:relative;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.22);
    }
    .spec::before{
      content:"";
      position:absolute;
      left:12px; top:12px;
      width:7px; height:7px;
      border-radius: 99px;
      background: rgba(35,230,255,.85);
      box-shadow: 0 0 0 2px rgba(35,230,255,.12), 0 0 18px rgba(35,230,255,.20);
    }
    .spec h3{
      margin:0 0 4px;
      padding-left: 14px;
      font-size:12px;
      letter-spacing:.14em;
      text-transform:uppercase;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    }
    .spec p{
      margin:0;
      padding-left: 14px;
      color: var(--muted);
      font-size: 13px;
    }

    .hero-cta{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top: 14px;
    }

    /* CSS slider (<= 600px height) */
    .slider{
      border-left:1px solid rgba(231,241,242,.12);
      min-height: 320px;
      max-height: 600px;
      height: min(52vh, 560px);
      position:relative;
      overflow:hidden;
    }
    .slides{
      position:absolute;
      inset:0;
      display:flex;
      width:400%;
      animation: slide 18s infinite ease-in-out;
    }
    .slide{
      width:25%;
      position:relative;
      background-size: cover;
      background-position: center;
      filter: saturate(.8) contrast(1.02);
    }
    .slide::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(900px 500px at 20% 20%, rgba(35,230,255,.18), transparent 60%),
        radial-gradient(800px 520px at 70% 30%, rgba(26,143,98,.20), transparent 62%),
        linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.60));
      mix-blend-mode: multiply;
    }
    .slide::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 36px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 36px);
      opacity:.10;
      mix-blend-mode: overlay;
    }

    .slide-caption{
      position:absolute;
      left:14px;
      right:14px;
      bottom:14px;
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:10px;
    }
    .chip{
      display:inline-flex;
      gap:10px;
      align-items:center;
      padding:10px 12px;
      border-radius: 14px;
      border:1px solid rgba(231,241,242,.14);
      background: rgba(8,12,14,.48);
      backdrop-filter: blur(6px);
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
      max-width: 72%;
    }
    .chip b{
      display:block;
      font-size:12px;
      letter-spacing:.14em;
      text-transform:uppercase;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    }
    .chip span{
      display:block;
      color: var(--muted);
      font-size: 13px;
    }
    .stamp{
      padding:8px 10px;
      border-radius: 12px;
      border:1px dashed rgba(255,210,74,.38);
      background: rgba(255,210,74,.08);
      color: rgba(255,210,74,.95);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
      letter-spacing:.16em;
      text-transform:uppercase;
      font-size:12px;
      white-space:nowrap;
    }

    @keyframes slide{
      0%, 20% { transform: translateX(0%); }
      25%, 45% { transform: translateX(-25%); }
      50%, 70% { transform: translateX(-50%); }
      75%, 95% { transform: translateX(-75%); }
      100% { transform: translateX(0%); }
    }

    /* MAIN sections */
    main{ padding: 10px 0 40px; }

    .section{
      margin-top: 14px;
    }

    .section-hdr{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:12px;
      padding: 14px 0 10px;
    }
    .section-hdr h2{
      margin:0;
      font-size: 16px;
      letter-spacing:.14em;
      text-transform:uppercase;
      font-weight: 900;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    }
    .section-hdr p{
      margin:0;
      color: var(--muted);
      font-size: 13px;
      max-width: 60ch;
    }

    .cards{
      display:grid;
      grid-template-columns: 1fr;
      gap:12px;
    }

    .card{
      border-radius: 18px;
      border:1px solid rgba(231,241,242,.12);
      background: linear-gradient(180deg, rgba(14,22,27,.72), rgba(10,15,18,.78));
      box-shadow: var(--shadow2);
      overflow:hidden;
      position:relative;
      transition: transform .45s ease, border-color .45s ease, box-shadow .45s ease, background .45s ease;
    }
    .card:hover{
      transform: translateY(-3px);
      border-color: rgba(35,230,255,.25);
      box-shadow: 0 26px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(35,230,255,.12);
    }

    .card-media{
      aspect-ratio: 16/9;
      background: #091116;
      position:relative;
      overflow:hidden;
    }
    .card-media img{
      width:100%;
      height:100%;
      object-fit: cover;
      filter: grayscale(.35) saturate(.85) contrast(1.02);
      transform: scale(1.02);
      transition: transform .6s ease, filter .6s ease;
    }
    .card:hover .card-media img{
      transform: scale(1.06);
      filter: grayscale(.25) saturate(.95) contrast(1.06);
    }

    .card-media::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(700px 300px at 25% 30%, rgba(35,230,255,.14), transparent 60%),
        radial-gradient(700px 320px at 70% 40%, rgba(26,143,98,.16), transparent 62%),
        linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.55));
      pointer-events:none;
    }

    .card-body{
      padding: 14px 14px 16px;
      display:grid;
      gap: 10px;
    }

    .meta{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      align-items:center;
      color: var(--faint);
      font-size: 12px;
      letter-spacing:.10em;
      text-transform:uppercase;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    }
    .tag{
      padding:6px 8px;
      border-radius: 999px;
      border:1px solid rgba(231,241,242,.12);
      background: rgba(0,0,0,.16);
      color: var(--muted);
    }

    .card h3{
      margin:0;
      font-size: 16px;
      line-height:1.2;
      letter-spacing:.02em;
      font-weight: 850;
      text-transform:uppercase;
    }
    .card p{
      margin:0;
      color: var(--muted);
      font-size: 13px;
    }

    .card-actions{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }

    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 10px;
      border-radius: 12px;
      border:1px solid rgba(231,241,242,.12);
      background: rgba(8,12,14,.35);
      color: var(--muted);
      font-size: 12px;
      letter-spacing:.12em;
      text-transform:uppercase;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    }

    /* Section individuality */
    .section--diag .card{
      background:
        radial-gradient(800px 260px at 20% 10%, rgba(35,230,255,.10), transparent 55%),
        linear-gradient(180deg, rgba(14,22,27,.74), rgba(10,15,18,.80));
    }
    .section--diag .card:hover{
      border-color: rgba(35,230,255,.34);
    }

    .section--bench .card{
      background:
        radial-gradient(900px 300px at 80% 10%, rgba(26,143,98,.14), transparent 58%),
        linear-gradient(180deg, rgba(12,20,24,.78), rgba(8,12,14,.82));
      border-style: solid;
    }
    .section--bench .card:hover{
      border-color: rgba(26,143,98,.40);
      box-shadow: 0 26px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(26,143,98,.14);
    }

    .section--log .card{
      background:
        linear-gradient(180deg, rgba(16,28,34,.76), rgba(10,15,18,.82));
      border-style: dashed;
      border-color: rgba(231,241,242,.14);
    }
    .section--log .card:hover{
      border-style: solid;
      border-color: rgba(255,210,74,.35);
      box-shadow: 0 26px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,210,74,.12);
    }

    /* BLOG list block */
    .blog-block{
      margin: 18px auto 0;
      width:min(var(--max), 92vw);
      border:1px solid rgba(231,241,242,.12);
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(16,28,34,.62), rgba(10,15,18,.74));
      box-shadow: var(--shadow2);
      overflow:hidden;
    }
    .blog-hdr{
      padding: 14px 16px;
      border-bottom:1px solid rgba(231,241,242,.12);
      background:
        linear-gradient(90deg, rgba(255,210,74,.18) 0 18px, rgba(16,28,34,.25) 18px 100%);
    }
    .blog-hdr h2{
      margin:0;
      letter-spacing:.14em;
      text-transform:uppercase;
      font-weight: 900;
      font-size: 15px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    }
    .blog-hdr p{
      margin:6px 0 0;
      color: var(--muted);
      font-size: 13px;
      max-width: 72ch;
    }
    .blog-list{
      list-style:none;
      margin:0;
      padding: 8px;
      display:grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }
    .blog-list li{
      border:1px solid rgba(231,241,242,.12);
      border-radius: 14px;
      background: rgba(8,12,14,.35);
      overflow:hidden;
      transition: transform .45s ease, border-color .45s ease, box-shadow .45s ease;
    }
    .blog-list li:hover{
      transform: translateY(-2px);
      border-color: rgba(35,230,255,.26);
      box-shadow: 0 18px 40px rgba(0,0,0,.45);
    }
    .blog-list a{
      display:grid;
      grid-template-columns: 96px 1fr;
      gap:12px;
      align-items:center;
      padding: 10px;
      text-decoration:none;
      color: var(--ink);
    }
    .blog-list img{
      width:96px;
      height:64px;
      object-fit: cover;
      border-radius: 12px;
      border:1px solid rgba(231,241,242,.12);
      filter: grayscale(.35) saturate(.85);
    }
    .blog-title{
      margin:0;
      font-size: 14px;
      letter-spacing:.06em;
      text-transform:uppercase;
      font-weight: 850;
      line-height:1.2;
    }
    .blog-sub{
      margin:6px 0 0;
      color: var(--muted);
      font-size: 13px;
    }

    /* CONTENT (centered article) */
    .content{
      width:min(980px, 92vw);
      margin: 18px auto 0;
      border:1px solid rgba(231,241,242,.12);
      border-radius: 18px;
      background:
        radial-gradient(900px 320px at 10% 0%, rgba(35,230,255,.10), transparent 55%),
        linear-gradient(180deg, rgba(16,28,34,.62), rgba(10,15,18,.78));
      box-shadow: var(--shadow2);
      overflow:hidden;
    }
    .content-top{
      padding: 16px;
      border-bottom:1px solid rgba(231,241,242,.12);
      background:
        linear-gradient(180deg, rgba(255,255,255,.04), transparent);
    }
    .content-top h2{
      margin:0;
      letter-spacing:.14em;
      text-transform:uppercase;
      font-weight: 900;
      font-size: 15px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    }
    .content-inner{ padding: 16px; }

    .center-image{
      width: min(860px, 100%);
      margin: 0 auto;
      border-radius: 16px;
      overflow:hidden;
      border:1px solid rgba(231,241,242,.12);
      background: rgba(0,0,0,.22);
      box-shadow: 0 18px 44px rgba(0,0,0,.45);
      position:relative;
    }
    .center-image::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        radial-gradient(900px 400px at 30% 20%, rgba(26,143,98,.14), transparent 60%),
        radial-gradient(700px 400px at 70% 25%, rgba(35,230,255,.10), transparent 62%),
        linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.50));
    }
    .center-image img{
      width:100%;
      height:auto;
      filter: grayscale(.25) saturate(.9) contrast(1.05);
    }

    .rating{
      width: min(860px, 100%);
      margin: 10px auto 0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
      padding: 10px 12px;
      border-radius: 14px;
      border:1px solid rgba(231,241,242,.12);
      background: rgba(8,12,14,.40);
      color: var(--muted);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
      letter-spacing:.10em;
      text-transform:uppercase;
      font-size:12px;
    }
    .rating b{ color: var(--yellow); letter-spacing:.12em; }

    hr.divider{
      border:0;
      height:1px;
      background: linear-gradient(90deg, transparent, rgba(35,230,255,.30), rgba(231,241,242,.10), transparent);
      margin: 16px 0;
    }

    article.reading{
      border:1px solid rgba(231,241,242,.12);
      border-radius: 18px;
      overflow:hidden;
      background:
        linear-gradient(180deg, rgba(14,22,27,.64), rgba(10,15,18,.80));
      box-shadow: var(--shadow2);
    }
    .reading-hdr{
      padding: 14px 16px;
      border-bottom:1px solid rgba(231,241,242,.12);
      background:
        linear-gradient(90deg, rgba(35,230,255,.18) 0 18px, rgba(16,28,34,.25) 18px 100%);
    }
    .reading-hdr h1{
      margin:0;
      font-size: 20px;
      letter-spacing:.04em;
      text-transform:uppercase;
      line-height:1.2;
      font-weight: 900;
    }
    .reading-hdr .byline{
      margin:8px 0 0;
      color: var(--muted);
      font-size: 13px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    .reading-body{
      padding: 16px;
      color: rgba(231,241,242,.92);
    }
    .reading-body p{ margin: 0 0 12px; color: var(--muted); }
    .reading-body h3{
      margin: 16px 0 8px;
      font-size: 14px;
      letter-spacing:.12em;
      text-transform:uppercase;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
      color: var(--ink);
    }
    .callout{
      border-radius: 16px;
      border:1px solid rgba(255,210,74,.22);
      background:
        linear-gradient(90deg, rgba(255,210,74,.20) 0 18px, rgba(8,12,14,.35) 18px 100%);
      padding: 12px 12px;
      margin: 14px 0;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.20);
    }
    .callout h4{
      margin:0 0 6px;
      letter-spacing:.14em;
      text-transform:uppercase;
      font-size: 12px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
      color: rgba(255,210,74,.95);
    }
    .callout p{ margin:0; color: var(--muted); }

    .pager{
      display:flex;
      gap:10px;
      justify-content:space-between;
      flex-wrap:wrap;
      margin-top: 14px;
    }

    .comments-block{
      margin-top: 14px;
      border:1px solid rgba(231,241,242,.12);
      border-radius: 18px;
      background: rgba(8,12,14,.30);
      overflow:hidden;
    }
    .comments-hdr{
      padding: 12px 14px;
      border-bottom:1px solid rgba(231,241,242,.12);
      letter-spacing:.14em;
      text-transform:uppercase;
      font-weight: 900;
      font-size: 13px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
      background:
        linear-gradient(90deg, rgba(255,210,74,.16) 0 18px, rgba(16,28,34,.20) 18px 100%);
    }
    .comments-empty{
      padding: 14px;
      color: var(--muted);
      font-size: 13px;
    }

    .comment-form{
      margin-top: 12px;
      border:1px solid rgba(231,241,242,.12);
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(14,22,27,.60), rgba(10,15,18,.80));
      overflow:hidden;
    }
    .comment-form .hdr{
      padding: 12px 14px;
      border-bottom:1px solid rgba(231,241,242,.12);
      letter-spacing:.14em;
      text-transform:uppercase;
      font-weight: 900;
      font-size: 13px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    }
    .comment-form form{
      padding: 14px;
      display:grid;
      gap:10px;
    }
    .form-grid{
      display:grid;
      grid-template-columns: 1fr;
      gap:10px;
    }
    .form-actions{
      display:flex;
      gap:10px;
      justify-content:flex-end;
      flex-wrap:wrap;
      padding-top: 4px;
    }

    /* Related articles */
    .related{
      margin-top: 14px;
      border:1px solid rgba(231,241,242,.12);
      border-radius: 18px;
      background:
        radial-gradient(900px 320px at 80% 10%, rgba(26,143,98,.14), transparent 60%),
        linear-gradient(180deg, rgba(16,28,34,.58), rgba(10,15,18,.78));
      overflow:hidden;
      box-shadow: var(--shadow2);
    }
    .related .hdr{
      padding: 12px 14px;
      border-bottom:1px solid rgba(231,241,242,.12);
      letter-spacing:.14em;
      text-transform:uppercase;
      font-weight: 900;
      font-size: 13px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
      background:
        linear-gradient(90deg, rgba(35,230,255,.14) 0 18px, rgba(16,28,34,.20) 18px 100%);
    }
    .related-grid{
      padding: 12px;
      display:grid;
      grid-template-columns: 1fr;
      gap:10px;
    }
    .rel-item{
      display:grid;
      grid-template-columns: 110px 1fr;
      gap:12px;
      align-items:center;
      border:1px solid rgba(231,241,242,.12);
      border-radius: 14px;
      background: rgba(8,12,14,.32);
      padding: 10px;
      transition: transform .45s ease, border-color .45s ease, box-shadow .45s ease;
    }
    .rel-item:hover{
      transform: translateY(-2px);
      border-color: rgba(26,143,98,.35);
      box-shadow: 0 18px 40px rgba(0,0,0,.45);
    }
    .rel-item img{
      width:110px;
      height:72px;
      object-fit:cover;
      border-radius: 12px;
      border:1px solid rgba(231,241,242,.12);
      filter: grayscale(.35) saturate(.85);
    }
    .rel-item a{
      text-decoration:none;
      color: var(--ink);
    }
    .rel-item h4{
      margin:0;
      font-size: 14px;
      letter-spacing:.06em;
      text-transform:uppercase;
      font-weight: 850;
      line-height:1.2;
    }
    .rel-item p{
      margin:6px 0 0;
      color: var(--muted);
      font-size: 13px;
    }

    /* Contacts */
    .contacts{
      width:min(var(--max), 92vw);
      margin: 18px auto 0;
      border:1px solid rgba(231,241,242,.12);
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(16,28,34,.62), rgba(10,15,18,.78));
      box-shadow: var(--shadow2);
      overflow:hidden;
    }
    .contacts .hdr{
      padding: 14px 16px;
      border-bottom:1px solid rgba(231,241,242,.12);
      background:
        linear-gradient(90deg, rgba(255,210,74,.16) 0 18px, rgba(16,28,34,.20) 18px 100%);
    }
    .contacts .hdr h2{
      margin:0;
      letter-spacing:.14em;
      text-transform:uppercase;
      font-weight: 900;
      font-size: 15px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    }
    .contacts-inner{
      padding: 16px;
      display:grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }
    .address{
      border:1px solid rgba(231,241,242,.12);
      border-radius: 16px;
      background: rgba(8,12,14,.32);
      padding: 12px 12px;
      color: var(--muted);
    }
    .address h3{
      margin:0 0 8px;
      font-size: 13px;
      letter-spacing:.12em;
      text-transform:uppercase;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
      color: var(--ink);
    }
    .address p{ margin:0 0 8px; }
    .map{
      border:1px solid rgba(231,241,242,.12);
      border-radius: 16px;
      overflow:hidden;
      background: rgba(0,0,0,.20);
      min-height: 260px;
    }
    .map iframe{
      width:100%;
      height:100%;
      border:0;
      display:block;
      filter: grayscale(.35) contrast(1.05) saturate(.85);
    }
    .proposition{
      border:1px solid rgba(35,230,255,.18);
      border-radius: 16px;
      background:
        radial-gradient(700px 240px at 20% 0%, rgba(35,230,255,.10), transparent 60%),
        rgba(8,12,14,.30);
      padding: 12px;
      color: var(--muted);
    }
    .proposition h3{
      margin:0 0 8px;
      font-size: 13px;
      letter-spacing:.12em;
      text-transform:uppercase;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
      color: var(--ink);
    }
    .proposition p{ margin:0; }

    /* ASIDE promos */
    aside{
      width:min(var(--max), 92vw);
      margin: 18px auto 0;
      display:grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }
    .promo{
      border:1px solid rgba(231,241,242,.12);
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(14,22,27,.62), rgba(10,15,18,.80));
      box-shadow: var(--shadow2);
      overflow:hidden;
    }
    .promo .hdr{
      padding: 12px 14px;
      border-bottom:1px solid rgba(231,241,242,.12);
      letter-spacing:.14em;
      text-transform:uppercase;
      font-weight: 900;
      font-size: 13px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
      background:
        linear-gradient(90deg, rgba(26,143,98,.16) 0 18px, rgba(16,28,34,.20) 18px 100%);
    }
    .promo .body{ padding: 14px; }
    .promo a{
      display:block;
      padding: 10px 12px;
      border-radius: 14px;
      border:1px solid rgba(231,241,242,.12);
      background: rgba(8,12,14,.32);
      text-decoration:none;
      color: var(--ink);
      transition: transform .45s ease, border-color .45s ease, box-shadow .45s ease;
      letter-spacing:.06em;
      text-transform:uppercase;
      font-weight: 850;
      font-size: 13px;
    }
    .promo a + a{ margin-top: 10px; }
    .promo a:hover{
      transform: translateY(-2px);
      border-color: rgba(35,230,255,.28);
      box-shadow: 0 18px 40px rgba(0,0,0,.45);
    }

    /* FOOTER */
    footer{
      margin-top: 22px;
      border-top:1px solid rgba(231,241,242,.12);
      background:
        linear-gradient(180deg, rgba(10,15,18,.80), rgba(6,9,11,.96));
    }
    .foot{
      width:min(var(--max), 92vw);
      margin-inline:auto;
      padding: 18px 0 20px;
      display:grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }
    .utility-strip{
      border:1px solid rgba(231,241,242,.12);
      border-radius: 18px;
      background:
        linear-gradient(90deg,
          rgba(255,210,74,.14) 0 18px,
          rgba(16,28,34,.20) 18px 68%,
          rgba(231,241,242,.06) 68% 100%);
      padding: 12px 12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .utility-strip .serial{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
      letter-spacing:.18em;
      text-transform:uppercase;
      font-size: 12px;
      color: rgba(231,241,242,.80);
    }
    .barcode{
      height: 18px;
      width: 160px;
      border-radius: 6px;
      background:
        repeating-linear-gradient(90deg,
          rgba(231,241,242,.70) 0 2px,
          rgba(231,241,242,.08) 2px 5px);
      opacity:.55;
      border:1px solid rgba(231,241,242,.12);
    }
    .slogan{
      margin:0;
      letter-spacing:.12em;
      text-transform:uppercase;
      font-weight: 900;
      font-size: 14px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    }
    .about{
      margin:0;
      color: var(--muted);
      max-width: 90ch;
      font-size: 13px;
    }
    .social{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
    }
    .social a{
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:10px 12px;
      border-radius: 14px;
      border:1px solid rgba(231,241,242,.12);
      background: rgba(8,12,14,.30);
      color: var(--ink);
      transition: transform .45s ease, border-color .45s ease, box-shadow .45s ease;
      letter-spacing:.12em;
      text-transform:uppercase;
      font-size: 12px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    }
    .social a:hover{
      transform: translateY(-2px);
      border-color: rgba(35,230,255,.30);
      box-shadow: 0 18px 40px rgba(0,0,0,.45);
    }
    .copy{
      margin:0;
      color: rgba(231,241,242,.62);
      font-size: 12px;
      letter-spacing:.10em;
      text-transform:uppercase;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    }

    /* Responsive */
    @media (min-width: 768px){
      .hero-copy{ padding: 22px 20px; }
      .specs{ grid-template-columns: 1fr 1fr; }
      .cards{ grid-template-columns: 1fr 1fr; }
      .blog-list{ grid-template-columns: 1fr 1fr; }
      .related-grid{ grid-template-columns: 1fr 1fr; }
      .contacts-inner{ grid-template-columns: 1.05fr .95fr; align-items:start; }
      .map{ min-height: 320px; }
      aside{ grid-template-columns: 1fr 1fr; }
      .form-grid{ grid-template-columns: 1fr 1fr; }
      .diag{ grid-template-columns: 1fr 1fr; }
    }

    @media (min-width: 1200px){
      .hero-grid{ grid-template-columns: 1.1fr .9fr; }
      .slider{ border-left:1px solid rgba(231,241,242,.12); }
      .cards{ grid-template-columns: repeat(3, 1fr); }
      .blog-list{ grid-template-columns: repeat(2, 1fr); }
      .related-grid{ grid-template-columns: repeat(3, 1fr); }
      aside{ grid-template-columns: repeat(4, 1fr); }
    }

    /* NAV behavior per requirement */
    .desktop-nav{ display:none; }
    .burger{ display:block; }
    @media (min-width: 1200px){
      .desktop-nav{ display:block; }
      details.burger{ display:none; }
      .header-actions{ min-width: 260px; }
    }