:root{
      --bg:#07090c;
      --panel:#0c1016;
      --panel2:#0b0e13;
      --card:#0f141c;
      --ink:#eef3fb;
      --muted:#aeb6c5;
      --muted2:#8e98aa;

      --red:#d1122a;          /* Rosso Corsa */
      --red2:#ff2b43;
      --cyan:#23d7e6;         /* signal cyan */
      --cyan2:#77f3ff;
      --white:#f6f8ff;

      --line:rgba(255,255,255,.08);
      --line2:rgba(255,255,255,.12);
      --shadow: 0 18px 60px rgba(0,0,0,.55);
      --radius:18px;
      --radius2:14px;
      --ring: 0 0 0 2px rgba(35,215,230,.35), 0 0 0 6px rgba(35,215,230,.12);

      --container: 1180px;

      --font-ui: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
      --font-cond: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
      --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }

    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    body{
      margin:0;
      color:var(--ink);
      font-family:var(--font-ui);
      background:
        radial-gradient(1200px 520px at 15% 10%, rgba(35,215,230,.10), transparent 55%),
        radial-gradient(1000px 520px at 80% 18%, rgba(209,18,42,.12), transparent 55%),
        linear-gradient(180deg, #05070a 0%, #07090c 35%, #06080b 100%);
      min-height:100vh;
      overflow-x:hidden;
    }

    /* Subtle security grid overlay */
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(transparent 0, rgba(255,255,255,.02) 1px, transparent 1px) 0 0/ 100% 26px,
        linear-gradient(90deg, transparent 0, rgba(255,255,255,.02) 1px, transparent 1px) 0 0/ 26px 100%;
      mix-blend-mode:screen;
      opacity:.35;
      z-index:0;
    }

    a{ color:inherit; text-decoration:none; }
    a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
      outline:none;
      box-shadow: var(--ring);
      border-color: rgba(35,215,230,.75) !important;
    }

    /* Header */
    header{
      position:sticky;
      top:0;
      z-index:50;
      background:
        linear-gradient(180deg, rgba(8,10,14,.92) 0%, rgba(8,10,14,.72) 100%);
      border-bottom:1px solid rgba(255,255,255,.08);
      backdrop-filter: blur(10px);
    }

    .topbar{
      position:relative;
      max-width:var(--container);
      margin:0 auto;
      padding:12px 16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width: 220px;
    }
    .mark{
      width:38px; height:38px;
      border-radius: 12px;
      position:relative;
      background:
        radial-gradient(14px 14px at 30% 30%, rgba(255,255,255,.12), transparent 60%),
        linear-gradient(135deg, rgba(209,18,42,.9), rgba(209,18,42,.15));
      box-shadow:
        0 0 0 1px rgba(255,255,255,.08) inset,
        0 14px 30px rgba(209,18,42,.18);
      overflow:hidden;
    }
    .mark::before{
      content:"";
      position:absolute;
      inset:-18px;
      background:
        repeating-linear-gradient(45deg, rgba(255,255,255,.09) 0 2px, transparent 2px 6px);
      opacity:.22;
      transform: rotate(8deg);
    }
    .mark::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, transparent 0 58%, rgba(35,215,230,.65) 58% 60%, transparent 60% 100%);
      opacity:.45;
    }

    .brand h1{
      font-family: var(--font-cond);
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      font-size: 14px;
      line-height: 1.1;
      margin:0;
    }
    .brand .tag{
      display:block;
      margin-top:3px;
      font-family:var(--font-mono);
      font-size:12px;
      letter-spacing:.08em;
      color:var(--muted);
      text-transform:uppercase;
    }

    /* NAV: rules require only ul/li/a inside <nav> */
    nav{ flex: 1; }
    nav ul{
      list-style:none;
      margin:0;
      padding:0;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:18px;
    }
    nav a{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 12px;
      border-radius: 12px;
      border:1px solid transparent;
      color: rgba(246,248,255,.92);
      font-family:var(--font-cond);
      text-transform:uppercase;
      letter-spacing:.14em;
      font-size:12px;
      position:relative;
      transition: transform .35s ease, border-color .35s ease, background .35s ease, color .35s ease;
    }
    nav a::after{
      content:"";
      position:absolute;
      left:12px; right:12px; bottom:8px;
      height:1px;
      background: linear-gradient(90deg, transparent, rgba(35,215,230,.95), transparent);
      transform: scaleX(.25);
      transform-origin:center;
      opacity:.0;
      transition: transform .35s ease, opacity .35s ease;
    }
    nav a:hover{
      border-color: rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      transform: translateY(-1px);
    }
    nav a:hover::after{ opacity:.9; transform: scaleX(1); }
    nav a[aria-current="page"]{
      border-color: rgba(35,215,230,.35);
      background: linear-gradient(180deg, rgba(35,215,230,.10), rgba(255,255,255,.03));
    }
    nav a[aria-current="page"]::after{ opacity:.9; transform: scaleX(1); }

    /* Desktop helper actions (not inside nav) */
    .actions{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:10px;
      min-width: 220px;
    }
    .chip{
      display:none;
      align-items:center;
      gap:10px;
      padding:9px 12px;
      border-radius:999px;
      background: rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.10);
      color: var(--muted);
      font-family: var(--font-mono);
      font-size:12px;
      letter-spacing:.08em;
      text-transform:uppercase;
      white-space:nowrap;
    }
    .chip strong{ color: var(--white); font-weight:700; }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:11px 14px;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.03);
      color: var(--white);
      font-family: var(--font-cond);
      text-transform:uppercase;
      letter-spacing:.14em;
      font-size:12px;
      transition: transform .35s ease, box-shadow .45s ease, border-color .35s ease, background .35s ease;
      cursor:pointer;
      user-select:none;
    }
    .btn:hover{
      transform: translateY(-1px);
      border-color: rgba(255,255,255,.22);
      box-shadow: 0 12px 40px rgba(0,0,0,.45);
      background: rgba(255,255,255,.05);
    }
    .btn-primary{
      background:
        linear-gradient(180deg, rgba(209,18,42,.92), rgba(209,18,42,.62));
      border-color: rgba(35,215,230,.38);
      box-shadow:
        0 0 0 1px rgba(255,255,255,.08) inset,
        0 16px 45px rgba(209,18,42,.22);
      position:relative;
      overflow:hidden;
    }
    .btn-primary::after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(90deg, transparent 0 60%, rgba(35,215,230,.55) 60% 62%, transparent 62% 100%);
      opacity:.55;
      transform: translateX(-12%);
      transition: transform .6s ease;
    }
    .btn-primary:hover{
      box-shadow:
        0 0 0 1px rgba(255,255,255,.10) inset,
        0 0 0 1px rgba(35,215,230,.18),
        0 22px 65px rgba(209,18,42,.30);
    }
    .btn-primary:hover::after{ transform: translateX(10%); }

    /* Burger (CSS-only) */
    .burger{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:44px; height:44px;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.03);
      cursor:pointer;
      transition: transform .35s ease, border-color .35s ease, background .35s ease;
    }
    .burger:hover{
      transform: translateY(-1px);
      border-color: rgba(35,215,230,.35);
      background: rgba(35,215,230,.06);
    }
    .burger span{
      display:block;
      width:18px;
      height:2px;
      background: rgba(246,248,255,.92);
      position:relative;
      border-radius:2px;
    }
    .burger span::before, .burger span::after{
      content:"";
      position:absolute;
      left:0;
      width:18px;
      height:2px;
      background: rgba(246,248,255,.92);
      border-radius:2px;
      transition: transform .35s ease, top .35s ease, opacity .35s ease;
    }
    .burger span::before{ top:-6px; }
    .burger span::after{ top:6px; }

    #menu-toggle{
      position:absolute;
      inline-size:1px; block-size:1px;
      overflow:hidden;
      clip-path: inset(50%);
      white-space:nowrap;
    }

    /* Mobile nav drawer */
    .nav-wrap{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .mobile-panel{
      display:none;
      position:fixed;
      inset:64px 12px auto 12px;
      max-height: calc(100vh - 76px);
      overflow:auto;
      background:
        radial-gradient(900px 380px at 10% 0%, rgba(35,215,230,.12), transparent 55%),
        linear-gradient(180deg, rgba(12,16,22,.98), rgba(10,12,16,.92));
      border:1px solid rgba(255,255,255,.12);
      border-radius: 18px;
      box-shadow: var(--shadow);
      z-index:70;
      padding:10px;
    }
    .mobile-panel nav ul{
      flex-direction:column;
      align-items:stretch;
      gap:8px;
    }
    .mobile-panel nav a{
      justify-content:space-between;
      padding:14px 14px;
      border-radius: 14px;
      background: rgba(255,255,255,.03);
      border-color: rgba(255,255,255,.10);
    }
    .mobile-panel nav a::after{ bottom:10px; left:14px; right:14px; }

    #menu-toggle:checked ~ .mobile-panel{ display:block; }
    #menu-toggle:checked + label.burger span{ background: transparent; }
    #menu-toggle:checked + label.burger span::before{ top:0; transform: rotate(45deg); }
    #menu-toggle:checked + label.burger span::after{ top:0; transform: rotate(-45deg); }

    /* Hero */
    .hero{
      position:relative;
      z-index:1;
      padding: 22px 16px 18px;
    }
    .hero .wrap{
      max-width: var(--container);
      margin: 0 auto;
      display:grid;
      grid-template-columns: 1fr;
      gap:14px;
      align-items:stretch;
    }

    .hero-panel{
      position:relative;
      border-radius: calc(var(--radius) + 4px);
      overflow:hidden;
      border:1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
        radial-gradient(900px 420px at 12% 20%, rgba(209,18,42,.16), transparent 55%),
        radial-gradient(900px 420px at 78% 10%, rgba(35,215,230,.16), transparent 55%),
        linear-gradient(180deg, rgba(12,16,22,.70), rgba(10,12,16,.76));
      box-shadow: var(--shadow);
    }

    .hero-panel::before{
      content:"";
      position:absolute;
      inset:-40px;
      background:
        repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 2px, transparent 2px 7px);
      opacity:.10; /* carbon weave hint */
      transform: rotate(8deg);
      pointer-events:none;
    }

    .hero-inner{
      position:relative;
      display:grid;
      grid-template-columns: 1fr;
      gap:14px;
      padding: 18px;
    }

    .kicker{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 10px;
      border-radius: 999px;
      border:1px solid rgba(35,215,230,.32);
      background: rgba(35,215,230,.08);
      color: var(--white);
      font-family: var(--font-mono);
      letter-spacing:.08em;
      text-transform:uppercase;
      font-size:12px;
      white-space:nowrap;
    }
    .badge .dot{
      width:8px; height:8px; border-radius:999px;
      background: var(--cyan);
      box-shadow: 0 0 0 3px rgba(35,215,230,.18);
    }
    .kicker .meta{
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    .hero h1{
      margin: 4px 0 0;
      font-family: var(--font-cond);
      text-transform: uppercase;
      letter-spacing: .10em;
      line-height: 1.02;
      font-weight: 900;
      font-size: clamp(28px, 4.2vw, 54px);
    }
    .hero h1 .stack{
      display:block;
      max-width: 20ch;
    }
    .hero .lede{
      margin: 10px 0 0;
      color: rgba(238,243,251,.88);
      max-width: 68ch;
      font-size: 14px;
      line-height: 1.55;
    }

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

    .hero-cta .btn{ padding:12px 14px; }
    .hero-cta .link{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 6px;
      color: var(--cyan2);
      font-family: var(--font-cond);
      text-transform: uppercase;
      letter-spacing: .14em;
      font-size: 12px;
      border-bottom: 1px solid rgba(35,215,230,.45);
      transform: skewX(-8deg);
      transition: color .35s ease, border-color .35s ease, transform .35s ease;
    }
    .hero-cta .link:hover{
      color: var(--white);
      border-color: rgba(255,255,255,.28);
      transform: skewX(-8deg) translateY(-1px);
    }

    /* Simple CSS slider (max 600px height) */
    .slider{
      position:relative;
      border-radius: var(--radius);
      overflow:hidden;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.25);
      height: min(58vh, 560px);
      min-height: 320px;
      box-shadow:
        0 0 0 1px rgba(255,255,255,.05) inset,
        0 18px 60px rgba(0,0,0,.55);
    }

    .slides{
      position:absolute;
      inset:0;
      display:flex;
      width:300%;
      animation: slide 18s infinite;
    }
    .slide{
      width: 33.3333%;
      position:relative;
      background-size: cover;
      background-position: center;
      filter: saturate(.95) contrast(1.05);
    }
    .slide::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(800px 400px at 10% 20%, rgba(35,215,230,.18), transparent 55%),
        radial-gradient(700px 380px at 78% 15%, rgba(209,18,42,.18), transparent 55%),
        linear-gradient(180deg, rgba(6,8,11,.2), rgba(6,8,11,.78));
    }
    .slide::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, transparent 0 62%, rgba(35,215,230,.32) 62% 62.6%, transparent 62.6% 100%),
        linear-gradient(135deg, rgba(209,18,42,.35), transparent 34%);
      opacity:.55;
      mix-blend-mode: screen;
      pointer-events:none;
    }

    .slide-cap{
      position:absolute;
      left: 16px;
      right: 16px;
      bottom: 14px;
      display:flex;
      flex-direction:column;
      gap:8px;
      z-index:2;
    }
    .cap-row{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .cap-title{
      font-family: var(--font-cond);
      text-transform: uppercase;
      letter-spacing:.12em;
      font-weight: 900;
      font-size: 14px;
      margin:0;
    }
    .cap-ticks{
      display:flex;
      align-items:center;
      gap:10px;
      color: rgba(246,248,255,.84);
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing:.08em;
      text-transform:uppercase;
      white-space:nowrap;
    }
    .tickline{
      height:1px;
      width: 160px;
      background: repeating-linear-gradient(90deg, rgba(255,255,255,.36) 0 10px, transparent 10px 18px);
      opacity:.55;
    }
    .cap-sub{
      margin:0;
      color: rgba(238,243,251,.82);
      font-size: 13px;
      line-height: 1.5;
      max-width: 70ch;
    }

    @keyframes slide{
      0%, 28%{ transform: translateX(0%); }
      33%, 61%{ transform: translateX(-33.3333%); }
      66%, 94%{ transform: translateX(-66.6666%); }
      100%{ transform: translateX(0%); }
    }

    /* Utility container sections */
    main{
      position:relative;
      z-index:1;
      padding: 12px 16px 34px;
    }

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

    .section-header{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:14px;
      margin-bottom: 14px;
    }
    .section-title{
      margin:0;
      font-family: var(--font-cond);
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing:.14em;
      font-size: 14px;
      color: rgba(246,248,255,.92);
      display:flex;
      align-items:center;
      gap:10px;
    }
    .slash{
      width:14px; height:14px;
      border:1px solid rgba(35,215,230,.40);
      transform: rotate(45deg);
      border-radius: 4px;
      box-shadow: 0 0 0 4px rgba(35,215,230,.08);
    }
    .section-note{
      margin:0;
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing:.08em;
      text-transform: uppercase;
    }

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

    article.card{
      position:relative;
      border-radius: var(--radius2);
      overflow:hidden;
      border:1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
      box-shadow: 0 10px 40px rgba(0,0,0,.35);
      transition: transform .45s ease, border-color .35s ease, box-shadow .45s ease;
      min-height: 100%;
    }
    .card:hover{
      transform: translateY(-3px);
      border-color: rgba(35,215,230,.22);
      box-shadow: 0 18px 60px rgba(0,0,0,.55);
    }

    .card .media{
      aspect-ratio: 16/9;
      width:100%;
      display:block;
      object-fit:cover;
      filter: saturate(.92) contrast(1.05);
    }

    .card .body{
      padding: 14px 14px 14px;
      position:relative;
    }

    .card .spine{
      position:absolute;
      left:0; top:0; bottom:0;
      width:4px;
      background: linear-gradient(180deg, var(--red), rgba(209,18,42,.18));
      opacity:.95;
    }

    .card .eyebrow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom: 8px;
      color: rgba(246,248,255,.76);
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing:.08em;
      text-transform: uppercase;
    }

    .state{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 10px;
      border-radius: 999px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.22);
      white-space:nowrap;
    }
    .state i{
      width:8px; height:8px; border-radius: 999px;
      display:inline-block;
      background: var(--cyan);
      box-shadow: 0 0 0 3px rgba(35,215,230,.12);
    }

    .card h3{
      margin:0 0 8px;
      font-family: var(--font-cond);
      text-transform: uppercase;
      letter-spacing:.10em;
      font-weight: 900;
      font-size: 16px;
      line-height: 1.2;
    }
    .card p{
      margin:0 0 12px;
      color: rgba(238,243,251,.82);
      font-size: 13px;
      line-height: 1.55;
    }

    .card .foot{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding-top: 10px;
      border-top: 1px dashed rgba(255,255,255,.16); /* pit-lane dashed divider */
    }
    .mono{
      font-family: var(--font-mono);
      letter-spacing:.08em;
      text-transform: uppercase;
      font-size: 12px;
      color: var(--muted);
      white-space:nowrap;
    }
    .read{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-family: var(--font-cond);
      text-transform: uppercase;
      letter-spacing: .14em;
      font-size:12px;
      color: var(--cyan2);
      padding-bottom:2px;
      border-bottom:1px solid rgba(35,215,230,.45);
      transform: skewX(-8deg);
      transition: color .35s ease, border-color .35s ease, transform .35s ease;
      white-space:nowrap;
    }
    .read:hover{
      color: var(--white);
      border-color: rgba(255,255,255,.28);
      transform: skewX(-8deg) translateY(-1px);
    }

    /* Section individuality */
    .section.s1 .section-title .slash{ border-color: rgba(209,18,42,.45); box-shadow: 0 0 0 4px rgba(209,18,42,.10); }
    .section.s1 article.card:hover{ border-color: rgba(209,18,42,.22); }
    .section.s1 .card .spine{ background: linear-gradient(180deg, var(--red), rgba(255,43,67,.12)); }
    .section.s1 .state i{ background: var(--red2); box-shadow: 0 0 0 3px rgba(209,18,42,.14); }

    .section.s2{
      background:
        linear-gradient(180deg, rgba(35,215,230,.06), transparent 55%);
      border-radius: 22px;
      padding: 22px 14px;
      border:1px solid rgba(255,255,255,.06);
      box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset;
    }
    .section.s2 .card{
      background:
        radial-gradient(520px 200px at 18% 0%, rgba(35,215,230,.10), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    }
    .section.s2 .card .spine{
      background: linear-gradient(180deg, rgba(35,215,230,.95), rgba(35,215,230,.12));
    }
    .section.s2 .state{
      border-color: rgba(35,215,230,.28);
      background: rgba(35,215,230,.07);
    }

    .section.s3{
      background:
        radial-gradient(760px 240px at 65% 0%, rgba(209,18,42,.10), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.02), transparent);
      border-radius: 22px;
      padding: 22px 14px;
      border:1px solid rgba(255,255,255,.06);
    }
    .section.s3 .card{
      position:relative;
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    }
    .section.s3 .card::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 14px);
      opacity:.08;
      pointer-events:none;
    }
    .section.s3 .card:hover{
      transform: translateY(-3px) rotate(-.1deg);
      border-color: rgba(255,255,255,.16);
    }
    .section.s3 .state i{ background: var(--cyan); }

    /* Blog list block */
    .block{
      position:relative;
      z-index:1;
      max-width: var(--container);
      margin: 0 auto;
      padding: 10px 16px 26px;
    }
    .block-inner{
      border-radius: 22px;
      border:1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
        linear-gradient(180deg, rgba(12,16,22,.72), rgba(10,12,16,.76));
      box-shadow: var(--shadow);
      padding: 18px;
      overflow:hidden;
      position:relative;
    }
    .block-inner::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, rgba(209,18,42,.18), transparent 22%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 20px);
      opacity:.10;
      pointer-events:none;
    }

    .block h2{
      margin:0 0 12px;
      font-family: var(--font-cond);
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .14em;
      font-size: 14px;
      position:relative;
      z-index:1;
      display:flex;
      align-items:center;
      gap:10px;
    }

    .bloglist{
      position:relative;
      z-index:1;
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .bloglist li a{
      display:grid;
      grid-template-columns: 92px 1fr;
      gap:12px;
      align-items:center;
      padding: 12px;
      border-radius: 16px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      transition: transform .45s ease, border-color .35s ease, background .35s ease;
    }
    .bloglist li a:hover{
      transform: translateY(-2px);
      border-color: rgba(35,215,230,.22);
      background: rgba(255,255,255,.05);
    }
    .bloglist img{
      width:92px;
      height:64px;
      object-fit:cover;
      border-radius: 12px;
      border:1px solid rgba(255,255,255,.10);
      filter: saturate(.92) contrast(1.05);
    }
    .blog-meta{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }
    .blog-meta strong{
      font-family: var(--font-cond);
      text-transform: uppercase;
      letter-spacing:.10em;
      font-size: 14px;
      font-weight: 900;
      line-height:1.2;
    }
    .blog-meta span{
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing:.08em;
      text-transform: uppercase;
      color: var(--muted);
      white-space:nowrap;
    }
    .blog-desc{
      margin: 6px 0 0;
      color: rgba(238,243,251,.82);
      font-size: 13px;
      line-height:1.45;
    }

    /* Content (centered, no side blocks) */
    .content{
      max-width: 920px;
      margin: 0 auto;
      padding: 0 16px 30px;
      position:relative;
      z-index:1;
    }
    .content .frame{
      border-radius: 22px;
      border:1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(700px 240px at 20% 0%, rgba(35,215,230,.10), transparent 60%),
        radial-gradient(700px 240px at 80% 15%, rgba(209,18,42,.12), transparent 60%),
        linear-gradient(180deg, rgba(12,16,22,.72), rgba(10,12,16,.78));
      box-shadow: var(--shadow);
      padding: 18px;
      overflow:hidden;
      position:relative;
    }
    .content .frame::before{
      content:"";
      position:absolute;
      inset:-40px;
      background:
        repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 2px, transparent 2px 7px);
      opacity:.08;
      transform: rotate(8deg);
      pointer-events:none;
    }
    .content .frame > *{ position:relative; z-index:1; }

    .content .heroimg{
      display:block;
      width:100%;
      max-width: 820px;
      margin: 0 auto;
      border-radius: 18px;
      border:1px solid rgba(255,255,255,.10);
      aspect-ratio: 16/9;
      object-fit: cover;
      filter: saturate(.92) contrast(1.05);
      box-shadow:
        0 0 0 1px rgba(255,255,255,.04) inset,
        0 16px 55px rgba(0,0,0,.55);
    }

    .rating{
      margin: 12px auto 0;
      max-width: 820px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding: 12px 14px;
      border-radius: 16px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
    }
    .rating strong{
      font-family: var(--font-cond);
      text-transform: uppercase;
      letter-spacing:.14em;
      font-size: 12px;
    }
    .rating span{
      font-family: var(--font-mono);
      letter-spacing:.08em;
      text-transform: uppercase;
      color: var(--muted);
      font-size: 12px;
      white-space:nowrap;
    }

    .divider{
      height:1px;
      margin: 14px 0 16px;
      background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 10px, transparent 10px 18px);
      opacity:.8;
    }

    article[itemscope][itemtype="https://schema.org/Article"]{
      max-width: 820px;
      margin: 0 auto;
      padding: 14px 14px 10px;
      border-radius: 18px;
      border:1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
      box-shadow: 0 14px 50px rgba(0,0,0,.35);
      position:relative;
      overflow:hidden;
    }
    article[itemscope]::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, rgba(209,18,42,.22), transparent 18%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 22px);
      opacity:.12;
      pointer-events:none;
    }
    article[itemscope] > *{ position:relative; z-index:1; }

    .article-top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
      margin-bottom: 10px;
    }
    .article-top .byline{
      display:flex;
      flex-direction:column;
      gap:4px;
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing:.08em;
      text-transform: uppercase;
    }

    .content h1[itemprop="headline"]{
      margin:0 0 8px;
      font-family: var(--font-cond);
      text-transform: uppercase;
      letter-spacing:.10em;
      font-weight: 900;
      font-size: clamp(20px, 2.6vw, 30px);
      line-height:1.1;
    }
    .article-body{
      color: rgba(238,243,251,.86);
      font-size: 14px;
      line-height: 1.65;
    }
    .article-body p{ margin: 0 0 12px; }
    .article-body ul{
      margin: 10px 0 12px 18px;
      padding:0;
      color: rgba(238,243,251,.86);
    }
    .article-body li{ margin: 6px 0; }

    .prevnext{
      max-width: 820px;
      margin: 14px auto 0;
      display:grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .pn{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding: 12px 14px;
      border-radius: 16px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      transition: transform .45s ease, border-color .35s ease, background .35s ease;
    }
    .pn:hover{
      transform: translateY(-2px);
      border-color: rgba(35,215,230,.22);
      background: rgba(255,255,255,.05);
    }
    .pn .lbl{
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing:.08em;
      text-transform: uppercase;
      color: var(--muted);
      white-space:nowrap;
    }
    .pn .ttl{
      font-family: var(--font-cond);
      text-transform: uppercase;
      letter-spacing:.10em;
      font-weight: 900;
      font-size: 13px;
      text-align:right;
    }

    /* Comments */
    .comments{
      max-width: 820px;
      margin: 16px auto 0;
      padding: 14px 14px 12px;
      border-radius: 18px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.02);
    }
    .comments h2{
      margin:0 0 10px;
      font-family: var(--font-cond);
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing:.14em;
      font-size: 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .comments .empty{
      padding: 12px;
      border-radius: 14px;
      border:1px dashed rgba(255,255,255,.18);
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing:.08em;
      text-transform: uppercase;
      background: rgba(0,0,0,.18);
    }
    form{
      margin-top: 12px;
      display:grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    label{
      font-family: var(--font-mono);
      letter-spacing:.08em;
      text-transform: uppercase;
      font-size: 12px;
      color: var(--muted);
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    input, textarea{
      width:100%;
      padding: 12px 12px;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.03);
      color: var(--white);
      font: inherit;
      transition: border-color .35s ease, background .35s ease, box-shadow .45s ease;
    }
    textarea{ min-height: 120px; resize: vertical; }
    input::placeholder, textarea::placeholder{ color: rgba(174,182,197,.70); }
    input:hover, textarea:hover{ border-color: rgba(255,255,255,.18); }

    .form-row{
      display:grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .submit-row{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:flex-start;
      padding-top: 4px;
    }

    /* Related */
    .related{
      max-width: 820px;
      margin: 18px auto 0;
      padding: 14px;
      border-radius: 18px;
      border:1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(520px 220px at 20% 0%, rgba(209,18,42,.12), transparent 60%),
        radial-gradient(520px 220px at 80% 0%, rgba(35,215,230,.10), transparent 60%),
        rgba(255,255,255,.02);
    }
    .related h2{
      margin:0 0 10px;
      font-family: var(--font-cond);
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing:.14em;
      font-size: 14px;
    }
    .related-grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .rel{
      display:grid;
      grid-template-columns: 92px 1fr;
      gap:12px;
      align-items:center;
      padding: 12px;
      border-radius: 16px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      transition: transform .45s ease, border-color .35s ease, background .35s ease;
    }
    .rel:hover{
      transform: translateY(-2px);
      border-color: rgba(209,18,42,.20);
      background: rgba(255,255,255,.05);
    }
    .rel img{
      width:92px; height:64px; object-fit:cover;
      border-radius: 12px;
      border:1px solid rgba(255,255,255,.10);
    }
    .rel strong{
      display:block;
      font-family: var(--font-cond);
      text-transform: uppercase;
      letter-spacing:.10em;
      font-weight: 900;
      font-size: 14px;
      margin-bottom: 4px;
      line-height:1.2;
    }
    .rel span{
      display:block;
      color: rgba(238,243,251,.82);
      font-size: 13px;
      line-height:1.45;
    }

    /* Contacts */
    .contacts{
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 16px 34px;
      position:relative;
      z-index:1;
    }
    .contacts .card{
      border-radius: 22px;
      border:1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
        linear-gradient(180deg, rgba(12,16,22,.72), rgba(10,12,16,.80));
      box-shadow: var(--shadow);
      padding: 18px;
      position:relative;
      overflow:hidden;
    }
    .contacts .card::before{
      content:"";
      position:absolute;
      inset:-40px;
      background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 16px);
      opacity:.08;
      transform: rotate(-2deg);
      pointer-events:none;
    }
    .contacts .card > *{ position:relative; z-index:1; }

    .contacts h2{
      margin:0 0 12px;
      font-family: var(--font-cond);
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing:.14em;
      font-size: 14px;
      display:flex;
      align-items:center;
      gap:10px;
    }

    .contact-grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 12px;
      align-items:start;
    }
    .address{
      padding: 12px;
      border-radius: 18px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
    }
    .address p{
      margin:0 0 10px;
      color: rgba(238,243,251,.86);
      font-size: 13px;
      line-height: 1.55;
    }
    .address .micro{
      font-family: var(--font-mono);
      color: var(--muted);
      font-size: 12px;
      letter-spacing:.08em;
      text-transform: uppercase;
    }
    .map{
      border-radius: 18px;
      border:1px solid rgba(255,255,255,.10);
      overflow:hidden;
      background: rgba(0,0,0,.25);
      aspect-ratio: 16/10;
      min-height: 220px;
    }
    .map iframe{
      width:100%;
      height:100%;
      border:0;
      filter: contrast(1.05) saturate(.9) grayscale(.25);
    }

    /* Aside promos + modal */
    aside{
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 16px 26px;
      position:relative;
      z-index:1;
    }
    .promo{
      display:grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .promo a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding: 14px 14px;
      border-radius: 18px;
      border:1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(90deg, rgba(209,18,42,.18), transparent 55%),
        rgba(255,255,255,.03);
      transition: transform .45s ease, border-color .35s ease, background .35s ease;
    }
    .promo a:hover{
      transform: translateY(-2px);
      border-color: rgba(35,215,230,.22);
      background:
        linear-gradient(90deg, rgba(35,215,230,.14), transparent 55%),
        rgba(255,255,255,.05);
    }
    .promo strong{
      font-family: var(--font-cond);
      text-transform: uppercase;
      letter-spacing:.12em;
      font-weight: 900;
      font-size: 13px;
      line-height:1.2;
    }
    .promo span{
      font-family: var(--font-mono);
      letter-spacing:.08em;
      text-transform: uppercase;
      font-size: 12px;
      color: var(--muted);
      white-space:nowrap;
    }

    /* Modal: pure CSS via :target */
    .modal{
      position:fixed;
      inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      padding: 18px;
      background: rgba(0,0,0,.62);
      z-index: 90;
    }
    .modal:target{ display:flex; }
    .modal .dialog{
      width: min(560px, 100%);
      border-radius: 20px;
      border:1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(700px 260px at 15% 0%, rgba(35,215,230,.14), transparent 60%),
        radial-gradient(700px 260px at 85% 0%, rgba(209,18,42,.16), transparent 60%),
        linear-gradient(180deg, rgba(12,16,22,.96), rgba(10,12,16,.94));
      box-shadow: 0 26px 90px rgba(0,0,0,.7);
      overflow:hidden;
      position:relative;
    }
    .dialog::before{
      content:"";
      position:absolute;
      inset:-60px;
      background: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 2px, transparent 2px 7px);
      opacity:.10;
      transform: rotate(8deg);
      pointer-events:none;
    }
    .dialog > *{ position:relative; z-index:1; }
    .dialog-head{
      padding: 14px 14px 10px;
      border-bottom: 1px solid rgba(255,255,255,.10);
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
    }
    .dialog-head h2{
      margin:0;
      font-family: var(--font-cond);
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .14em;
      font-size: 14px;
    }
    .close{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:40px; height:40px;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.03);
      transition: transform .35s ease, border-color .35s ease, background .35s ease;
    }
    .close:hover{
      transform: translateY(-1px);
      border-color: rgba(35,215,230,.28);
      background: rgba(35,215,230,.06);
    }
    .dialog-body{
      padding: 14px;
    }
    .dialog-body p{
      margin:0 0 12px;
      color: rgba(238,243,251,.84);
      font-size: 13px;
      line-height: 1.55;
    }

    /* Footer */
    footer{
      position:relative;
      z-index:1;
      margin-top: 10px;
      border-top:1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(180deg, rgba(8,10,14,.86), rgba(6,8,11,.94));
    }
    .foot{
      max-width: var(--container);
      margin:0 auto;
      padding: 18px 16px 22px;
      display:grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }
    .slogan{
      font-family: var(--font-cond);
      text-transform: uppercase;
      letter-spacing:.14em;
      font-weight: 900;
      margin:0;
      font-size: 14px;
    }
    .about{
      margin:0;
      color: rgba(238,243,251,.82);
      font-size: 13px;
      line-height: 1.55;
      max-width: 78ch;
    }
    .social{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }
    .social a{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 10px 12px;
      border-radius: 999px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.03);
      color: var(--cyan2);
      font-family: var(--font-cond);
      text-transform: uppercase;
      letter-spacing:.14em;
      font-size: 12px;
      transition: transform .45s ease, border-color .35s ease, background .35s ease, color .35s ease;
    }
    .social a:hover{
      transform: translateY(-1px);
      border-color: rgba(35,215,230,.28);
      background: rgba(35,215,230,.06);
      color: var(--white);
    }
    .copy{
      margin:0;
      color: var(--muted2);
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing:.08em;
      text-transform: uppercase;
      padding-top: 10px;
      border-top: 1px dashed rgba(255,255,255,.14);
    }

    /* Responsive */
    @media (min-width: 768px){
      .hero{ padding: 26px 16px 18px; }
      .hero-inner{ padding: 22px; grid-template-columns: 1.15fr .85fr; align-items:stretch; }
      .slider{ min-height: 360px; height: min(54vh, 560px); }

      .grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
      .bloglist{ grid-template-columns: repeat(2, 1fr); }
      .related-grid{ grid-template-columns: repeat(2, 1fr); }
      .form-row{ grid-template-columns: repeat(2, 1fr); }
      .prevnext{ grid-template-columns: repeat(2, 1fr); }
      .contact-grid{ grid-template-columns: 1.05fr .95fr; }
      .foot{ grid-template-columns: 1.2fr .8fr; align-items:start; }
      .chip{ display:inline-flex; }
    }

    @media (min-width: 1200px){
      .topbar{ padding: 12px 18px; }
      .hero .wrap{ grid-template-columns: 1fr; }
      .grid{ grid-template-columns: repeat(3, 1fr); gap: 14px; }
      .bloglist{ grid-template-columns: repeat(3, 1fr); }
      .related-grid{ grid-template-columns: repeat(3, 1fr); }
    }

    /* Burger behavior: under 1200px, hide desktop centered nav and use drawer */
    @media (max-width: 1199.98px){
      .nav-wrap{ justify-content:flex-end; }
      .topbar nav{ display:none; }
      .mobile-panel nav{ display:block; }
      .actions .btn{ display:none; }
      .actions .chip{ display:none; }
    }
    @media (min-width: 1200px){
      #menu-toggle, .burger, .mobile-panel{ display:none !important; }
    }