:root{
      --bg: #ffffff;
      --ink: #101826;
      --charcoal: #1a2433;
      --muted: #556274;
      --silver: #e7eef3;
      --hairline: rgba(16,24,38,.12);
      --mint: #57e6c2;
      --mint-deep: #16bfa0;
      --glacier: #79b8ff;
      --ice: #f6fbff;
      --wash: #eefdf8;
      --shadow: 0 18px 45px rgba(16, 24, 38, .10);
      --shadow-soft: 0 10px 24px rgba(16, 24, 38, .08);
      --radius: 18px;
      --radius-sm: 14px;
      --max: 1160px;
      --focus: 0 0 0 4px rgba(87, 230, 194, .25), 0 0 0 1px rgba(16, 24, 38, .18) inset;
      --grid-gap: 16px;
    }

    *{ box-sizing: border-box; }
    html{ scroll-behavior: smooth; }
    body{
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color: var(--ink);
      background:
        radial-gradient(1200px 700px at 18% -10%, rgba(87,230,194,.20), transparent 52%),
        radial-gradient(900px 520px at 82% 0%, rgba(121,184,255,.18), transparent 55%),
        linear-gradient(180deg, rgba(246,251,255,.95), rgba(255,255,255,1) 42%);
      letter-spacing: .01em;
      line-height: 1.6;
      min-height: 100vh;
    }

    a{ color: #0b4f68; text-decoration-thickness: 1px; text-underline-offset: .18em; }
    a:hover{ color: #063a4d; }
    a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible{
      outline: none;
      box-shadow: var(--focus);
      border-radius: 12px;
    }

    /* Header / Nav */
    header{
      position: sticky;
      top: 0;
      z-index: 20;
      backdrop-filter: blur(12px);
      background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.74));
      border-bottom: 1px solid var(--hairline);
    }

    .topbar{
      max-width: var(--max);
      margin: 0 auto;
      padding: 14px 16px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: center;
    }

    .brand{
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
    .mark{
      width: 40px;
      height: 40px;
      border-radius: 14px;
      background:
        radial-gradient(14px 14px at 30% 35%, rgba(255,255,255,.95), rgba(255,255,255,0)),
        linear-gradient(145deg, rgba(87,230,194,.95), rgba(121,184,255,.82));
      box-shadow: 0 12px 26px rgba(16, 24, 38, .12);
      border: 1px solid rgba(16,24,38,.10);
      position: relative;
    }
    .mark:after{
      content:"";
      position: absolute;
      inset: 10px 11px 9px 11px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.70);
      background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.00));
    }

    .brand h2{
      margin: 0;
      font-size: 14px;
      font-weight: 650;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--charcoal);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .brand p{
      margin: 0;
      font-size: 12px;
      color: var(--muted);
      letter-spacing: .02em;
    }

    /* Required nav structure: nav > ul > li > a only */
    nav ul{
      list-style: none;
      margin: 0;
      padding: 0;
      display: none; /* shown on desktop */
      gap: 14px;
      align-items: center;
      justify-content: flex-end;
    }
    nav li{ margin: 0; padding: 0; }
    nav a{
      display: inline-flex;
      align-items: center;
      padding: 10px 12px;
      border-radius: 14px;
      text-decoration: none;
      color: var(--charcoal);
      border: 1px solid transparent;
      transition: transform .35s ease, background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
      letter-spacing: .02em;
      font-weight: 560;
      font-size: 13px;
    }
    nav a:hover{
      background: rgba(87,230,194,.12);
      border-color: rgba(16,24,38,.10);
      box-shadow: 0 10px 22px rgba(16,24,38,.06);
      transform: translateY(-1px);
    }

    /* Mobile burger: pure CSS via details */
    .navwrap{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 10px;
    }
    details.burger{
      position: relative;
    }
    details.burger > summary{
      list-style: none;
      cursor: pointer;
      user-select: none;
      border: 1px solid rgba(16,24,38,.14);
      background: rgba(255,255,255,.78);
      border-radius: 16px;
      padding: 10px 12px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 10px 22px rgba(16,24,38,.06);
      transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    }
    details.burger > summary::-webkit-details-marker{ display: none; }
    details.burger > summary:hover{
      transform: translateY(-1px);
      border-color: rgba(16,24,38,.20);
      box-shadow: 0 14px 28px rgba(16,24,38,.08);
    }
    .burgericon{
      width: 18px;
      height: 12px;
      position: relative;
      display: inline-block;
    }
    .burgericon span{
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--mint-deep), #0c3f55);
      border-radius: 2px;
      opacity: .95;
      transition: transform .35s ease, top .35s ease, opacity .35s ease;
    }
    .burgericon span:nth-child(1){ top: 0; }
    .burgericon span:nth-child(2){ top: 5px; }
    .burgericon span:nth-child(3){ top: 10px; }
    details[open] .burgericon span:nth-child(1){ top: 5px; transform: rotate(45deg); }
    details[open] .burgericon span:nth-child(2){ opacity: 0; }
    details[open] .burgericon span:nth-child(3){ top: 5px; transform: rotate(-45deg); }
    .burgertxt{
      font-size: 12px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 650;
    }

    .panel{
      position: absolute;
      right: 0;
      top: calc(100% + 10px);
      width: min(340px, calc(100vw - 32px));
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(16,24,38,.12);
      border-radius: 18px;
      box-shadow: var(--shadow);
      padding: 10px;
    }
    .panel nav ul{
      display: grid;
      gap: 8px;
      justify-content: stretch;
    }
    .panel nav a{
      width: 100%;
      justify-content: space-between;
      background: rgba(246,251,255,.75);
      border-color: rgba(16,24,38,.10);
    }

    .ctaRow{
      display: none;
      gap: 10px;
      align-items: center;
    }

    .btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 16px;
      border: 1px solid rgba(16,24,38,.14);
      background: rgba(255,255,255,.78);
      color: var(--charcoal);
      text-decoration: none;
      font-weight: 650;
      letter-spacing: .02em;
      font-size: 13px;
      transition: transform .35s ease, box-shadow .35s ease, background-color .35s ease, border-color .35s ease;
      box-shadow: 0 10px 22px rgba(16,24,38,.06);
      white-space: nowrap;
    }
    .btn:hover{
      transform: translateY(-1px);
      box-shadow: 0 14px 28px rgba(16,24,38,.09);
      border-color: rgba(16,24,38,.20);
    }
    .btn.primary{
      background: linear-gradient(135deg, rgba(87,230,194,.98), rgba(22,191,160,.92));
      border-color: rgba(16,24,38,.10);
      color: #052b2d;
      box-shadow: 0 16px 36px rgba(22,191,160,.20);
    }
    .btn.primary:hover{
      box-shadow: 0 18px 44px rgba(22,191,160,.28);
      border-color: rgba(5,43,45,.20);
    }
    .btn.ink{
      background: linear-gradient(135deg, rgba(16,24,38,.96), rgba(11,79,104,.90));
      border-color: rgba(255,255,255,.16);
      color: #ecfbff;
      box-shadow: 0 18px 44px rgba(16,24,38,.22);
    }

    /* Modal: pure CSS via :target */
    .modal{
      position: fixed;
      inset: 0;
      display: none;
      place-items: center;
      padding: 18px;
      background: rgba(16,24,38,.55);
      z-index: 50;
    }
    .modal:target{
      display: grid;
    }
    .modal__dialog{
      width: min(560px, 100%);
      border-radius: 22px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(255,255,255,.30);
      box-shadow: 0 26px 70px rgba(16,24,38,.35);
      overflow: hidden;
    }
    .modal__top{
      padding: 16px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-bottom: 1px solid rgba(16,24,38,.10);
      background: linear-gradient(180deg, rgba(246,251,255,.9), rgba(255,255,255,.9));
    }
    .modal__top h2{
      margin: 0;
      font-size: 16px;
      letter-spacing: .01em;
      font-weight: 750;
      color: var(--charcoal);
    }
    .modal__close{
      color: var(--muted);
      text-decoration: none;
      font-weight: 700;
      padding: 8px 10px;
      border-radius: 14px;
      border: 1px solid rgba(16,24,38,.12);
      background: rgba(255,255,255,.75);
      transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    }
    .modal__close:hover{
      transform: translateY(-1px);
      border-color: rgba(16,24,38,.20);
      box-shadow: 0 10px 22px rgba(16,24,38,.08);
    }
    .modal__body{
      padding: 18px;
      display: grid;
      gap: 12px;
    }
    .field{
      display: grid;
      gap: 6px;
    }
    label{
      font-size: 12px;
      color: var(--muted);
      letter-spacing: .06em;
      text-transform: uppercase;
      font-weight: 700;
    }
    input, textarea{
      width: 100%;
      border-radius: 16px;
      border: 1px solid rgba(16,24,38,.14);
      background: rgba(246,251,255,.75);
      padding: 12px 14px;
      font-size: 14px;
      color: var(--charcoal);
      transition: border-color .35s ease, box-shadow .35s ease, background-color .35s ease;
    }
    textarea{ min-height: 110px; resize: vertical; }
    input:hover, textarea:hover{ border-color: rgba(16,24,38,.22); }
    .modal__actions{
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
      padding: 0 18px 18px;
    }

    /* HERO */
    .hero{
      max-width: var(--max);
      margin: 0 auto;
      padding: 26px 16px 18px;
      display: grid;
      gap: 16px;
    }
    .heroGrid{
      display: grid;
      gap: 16px;
      align-items: stretch;
    }

    .heroCard{
      border-radius: 26px;
      border: 1px solid rgba(16,24,38,.10);
      background:
        linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.80)),
        radial-gradient(800px 260px at 12% 20%, rgba(87,230,194,.18), transparent 55%),
        radial-gradient(700px 240px at 88% 20%, rgba(121,184,255,.16), transparent 58%);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .heroInner{
      padding: 20px;
      display: grid;
      gap: 14px;
    }
    .kicker{
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(16,24,38,.10);
      background: rgba(246,251,255,.75);
      width: fit-content;
      color: var(--muted);
      letter-spacing: .08em;
      text-transform: uppercase;
      font-weight: 750;
      font-size: 12px;
    }
    .dot{
      width: 8px;
      height: 8px;
      border-radius: 99px;
      background: linear-gradient(135deg, var(--mint), var(--glacier));
      box-shadow: 0 0 0 4px rgba(87,230,194,.18);
    }
    .hero h1{
      margin: 0;
      font-size: 30px;
      line-height: 1.15;
      letter-spacing: .01em;
      font-weight: 800;
      color: var(--charcoal);
    }
    .heroLead{
      margin: 0;
      font-size: 15px;
      color: var(--muted);
      max-width: 62ch;
    }
    .heroActions{
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
      padding-top: 6px;
    }

    .heroMeta{
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-top: 4px;
    }
    .metaItem{
      border-radius: 18px;
      border: 1px solid rgba(16,24,38,.10);
      background: rgba(255,255,255,.72);
      padding: 12px 14px;
      box-shadow: 0 12px 26px rgba(16,24,38,.06);
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 12px;
      align-items: center;
    }
    .icon{
      width: 34px;
      height: 34px;
      border-radius: 14px;
      border: 1px solid rgba(16,24,38,.10);
      background: linear-gradient(180deg, rgba(87,230,194,.15), rgba(121,184,255,.10));
      display: grid;
      place-items: center;
    }
    .icon svg{
      width: 18px;
      height: 18px;
      stroke: #0b4f68;
      opacity: .92;
    }
    .metaItem strong{
      display: block;
      font-size: 13px;
      color: var(--charcoal);
      letter-spacing: .01em;
    }
    .metaItem span{
      display: block;
      font-size: 13px;
      color: var(--muted);
    }

    /* Slider (CSS only, max 600px height) */
    .slider{
      border-radius: 26px;
      border: 1px solid rgba(16,24,38,.10);
      background: rgba(255,255,255,.70);
      overflow: hidden;
      box-shadow: var(--shadow-soft);
      max-height: 600px;
    }
    .slides{
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 100%;
      animation: slide 18s infinite;
    }
    .slide{
      position: relative;
      min-height: 260px;
      max-height: 600px;
      height: clamp(260px, 42vw, 520px);
      overflow: hidden;
    }
    .slide img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(.95) contrast(.98) brightness(1.05);
      transform: scale(1.02);
    }
    .slide:after{
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(255,255,255,.00), rgba(255,255,255,.06) 40%, rgba(255,255,255,.18)),
        radial-gradient(900px 380px at 24% 30%, rgba(87,230,194,.20), transparent 55%),
        radial-gradient(700px 280px at 86% 25%, rgba(121,184,255,.16), transparent 60%);
      pointer-events: none;
    }
    .slideLabel{
      position: absolute;
      left: 16px;
      bottom: 16px;
      right: 16px;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,.40);
      background: rgba(255,255,255,.70);
      backdrop-filter: blur(10px);
      padding: 12px 14px;
      display: grid;
      gap: 2px;
      box-shadow: 0 18px 44px rgba(16,24,38,.16);
    }
    .slideLabel strong{
      font-size: 14px;
      color: var(--charcoal);
      letter-spacing: .01em;
    }
    .slideLabel span{
      font-size: 13px;
      color: var(--muted);
    }

    @keyframes slide{
      0%, 26%{ transform: translateX(0%); }
      33%, 59%{ transform: translateX(-100%); }
      66%, 92%{ transform: translateX(-200%); }
      100%{ transform: translateX(0%); }
    }

    /* Main sections */
    main{
      max-width: var(--max);
      margin: 0 auto;
      padding: 12px 16px 42px;
      display: grid;
      gap: 22px;
    }
    .sectionHead{
      display: grid;
      gap: 8px;
      margin: 8px 0 2px;
    }
    .sectionHead h2{
      margin: 0;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: .01em;
      color: var(--charcoal);
    }
    .sectionHead p{
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      max-width: 75ch;
    }

    .grid{
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--grid-gap);
    }

    .card{
      border-radius: var(--radius);
      border: 1px solid rgba(16,24,38,.10);
      background: rgba(255,255,255,.82);
      box-shadow: 0 12px 28px rgba(16,24,38,.07);
      overflow: hidden;
      transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease, background-color .45s ease;
      display: grid;
    }
    .card:hover{
      transform: translateY(-3px);
      box-shadow: 0 22px 54px rgba(16,24,38,.12);
      border-color: rgba(16,24,38,.16);
    }
    .thumb{
      position: relative;
      height: 170px;
      background: rgba(246,251,255,.9);
      border-bottom: 1px solid rgba(16,24,38,.10);
    }
    .thumb img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(.95) contrast(.98) brightness(1.06);
    }
    .thumb:after{
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,.00), rgba(255,255,255,.10), rgba(255,255,255,.18));
      pointer-events: none;
    }
    .cardBody{
      padding: 14px 14px 16px;
      display: grid;
      gap: 10px;
    }
    .tag{
      width: fit-content;
      font-size: 12px;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-weight: 780;
      color: #0b4f68;
      background: rgba(87,230,194,.14);
      border: 1px solid rgba(16,24,38,.10);
      padding: 6px 10px;
      border-radius: 999px;
    }
    .card h3{
      margin: 0;
      font-size: 15px;
      letter-spacing: .01em;
      line-height: 1.25;
      color: var(--charcoal);
    }
    .card p{
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }
    .card a.more{
      margin-top: 2px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      width: fit-content;
      font-weight: 720;
      color: #0b4f68;
      border-bottom: 1px solid rgba(11,79,104,.25);
      padding-bottom: 2px;
      transition: color .35s ease, border-color .35s ease, transform .35s ease;
    }
    .card a.more:hover{
      color: #063a4d;
      border-color: rgba(6,58,77,.40);
      transform: translateX(2px);
    }

    /* Section individuality */
    .s1{
      border-radius: 26px;
      background: linear-gradient(180deg, rgba(246,251,255,.85), rgba(255,255,255,.96));
      border: 1px solid rgba(16,24,38,.08);
      padding: 16px;
      box-shadow: 0 18px 45px rgba(16,24,38,.06);
    }
    .s1 .card{
      background: rgba(255,255,255,.86);
    }
    .s1 .card:hover{
      background: rgba(255,255,255,.92);
    }

    .s2{
      border-radius: 26px;
      background:
        linear-gradient(180deg, rgba(238,253,248,.78), rgba(255,255,255,.94));
      border: 1px solid rgba(16,24,38,.08);
      padding: 16px;
      box-shadow: 0 18px 45px rgba(16,24,38,.06);
      position: relative;
      overflow: hidden;
    }
    .s2:before{
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(900px 320px at 10% 10%, rgba(87,230,194,.22), transparent 60%);
      pointer-events: none;
    }
    .s2 .card{
      border-color: rgba(16,24,38,.10);
      box-shadow: 0 12px 28px rgba(16,24,38,.06);
    }
    .s2 .card:hover{
      transform: translateY(-4px);
      box-shadow: 0 24px 60px rgba(16,24,38,.12);
      border-color: rgba(22,191,160,.35);
    }
    .s2 .tag{
      background: rgba(121,184,255,.14);
      color: #0f3a62;
    }

    .s3{
      border-radius: 26px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,251,255,.88));
      border: 1px solid rgba(16,24,38,.08);
      padding: 16px;
      box-shadow: 0 18px 45px rgba(16,24,38,.06);
    }
    .s3 .card{
      background: rgba(246,251,255,.72);
      border-color: rgba(16,24,38,.10);
    }
    .s3 .thumb{
      border-bottom-color: rgba(16,24,38,.08);
    }
    .s3 .card:hover{
      transform: translateY(-2px);
      box-shadow: 0 20px 54px rgba(16,24,38,.10);
    }

    /* Blog list block */
    .block{
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 16px 42px;
    }
    .blogBlock{
      border-radius: 26px;
      border: 1px solid rgba(16,24,38,.10);
      background: rgba(255,255,255,.86);
      box-shadow: var(--shadow-soft);
      overflow: hidden;
    }
    .blogHead{
      padding: 16px;
      border-bottom: 1px solid rgba(16,24,38,.10);
      background: linear-gradient(180deg, rgba(238,253,248,.70), rgba(255,255,255,.82));
    }
    .blogHead h2{
      margin: 0;
      font-size: 18px;
      font-weight: 850;
      color: var(--charcoal);
    }
    .blogHead p{
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 14px;
      max-width: 80ch;
    }
    .blogList{
      list-style: none;
      margin: 0;
      padding: 10px;
      display: grid;
      gap: 10px;
    }
    .blogList li{
      margin: 0;
    }
    .blogList a{
      text-decoration: none;
      display: grid;
      grid-template-columns: 92px 1fr;
      gap: 12px;
      align-items: center;
      padding: 10px;
      border-radius: 20px;
      border: 1px solid rgba(16,24,38,.10);
      background: rgba(246,251,255,.70);
      transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease, background-color .45s ease;
      color: var(--charcoal);
    }
    .blogList a:hover{
      transform: translateY(-2px);
      box-shadow: 0 16px 44px rgba(16,24,38,.10);
      border-color: rgba(22,191,160,.32);
      background: rgba(255,255,255,.86);
    }
    .blogThumb{
      width: 92px;
      height: 68px;
      border-radius: 16px;
      border: 1px solid rgba(16,24,38,.10);
      overflow: hidden;
      background: rgba(255,255,255,.85);
      box-shadow: 0 10px 20px rgba(16,24,38,.06);
    }
    .blogThumb img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(.95) brightness(1.05);
    }
    .blogText{
      display: grid;
      gap: 4px;
      min-width: 0;
    }
    .blogText strong{
      font-size: 14px;
      line-height: 1.25;
      letter-spacing: .01em;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .blogText span{
      font-size: 13px;
      color: var(--muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Content block (centered, no side blocks) */
    .contentWrap{
      max-width: 860px;
      margin: 0 auto;
      padding: 0 16px 42px;
      display: grid;
      gap: 16px;
    }
    .contentCard{
      border-radius: 26px;
      border: 1px solid rgba(16,24,38,.10);
      background: rgba(255,255,255,.88);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .contentTop{
      padding: 16px;
      border-bottom: 1px solid rgba(16,24,38,.10);
      background: linear-gradient(180deg, rgba(246,251,255,.88), rgba(255,255,255,.90));
      display: grid;
      gap: 6px;
    }
    .contentTop h2{
      margin: 0;
      font-size: 18px;
      font-weight: 850;
      color: var(--charcoal);
    }
    .contentTop p{
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }
    .centerImage{
      padding: 16px;
      display: grid;
      place-items: center;
      gap: 10px;
      background:
        radial-gradient(900px 260px at 40% 0%, rgba(87,230,194,.14), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,251,255,.70));
    }
    .centerImage figure{
      margin: 0;
      width: min(720px, 100%);
    }
    .centerImage img{
      width: 100%;
      height: auto;
      border-radius: 22px;
      border: 1px solid rgba(16,24,38,.10);
      box-shadow: 0 22px 60px rgba(16,24,38,.14);
      display: block;
    }
    .rating{
      width: min(720px, 100%);
      border-radius: 18px;
      border: 1px solid rgba(16,24,38,.10);
      background: rgba(255,255,255,.78);
      padding: 10px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--charcoal);
      box-shadow: 0 12px 26px rgba(16,24,38,.08);
    }
    .rating strong{
      letter-spacing: .06em;
      text-transform: uppercase;
      font-size: 12px;
      color: var(--muted);
    }
    .rating span{
      font-weight: 820;
      color: #0b4f68;
    }
    .divider{
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(16,24,38,.14), transparent);
      margin: 6px 0 0;
      width: min(720px, 100%);
      justify-self: center;
    }

    article[itemscope]{
      padding: 16px;
      display: grid;
      gap: 12px;
    }
    .articleMeta{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      color: var(--muted);
      font-size: 13px;
    }
    .chip{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid rgba(16,24,38,.10);
      background: rgba(246,251,255,.70);
    }
    .chip b{ color: var(--charcoal); font-weight: 800; }
    .articleBody{
      color: var(--charcoal);
      font-size: 15px;
      line-height: 1.75;
    }
    .articleBody p{ margin: 0 0 10px; color: var(--charcoal); }
    .callout{
      border-radius: 18px;
      border: 1px solid rgba(16,24,38,.10);
      background: linear-gradient(180deg, rgba(238,253,248,.80), rgba(255,255,255,.90));
      padding: 14px 14px;
      display: grid;
      gap: 6px;
      position: relative;
      overflow: hidden;
    }
    .callout:before{
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 6px;
      background: linear-gradient(180deg, var(--mint), rgba(121,184,255,.85));
    }
    .callout h3{
      margin: 0;
      padding-left: 10px;
      font-size: 14px;
      font-weight: 900;
      color: var(--charcoal);
    }
    .callout p{
      margin: 0;
      padding-left: 10px;
      color: var(--muted);
      font-size: 14px;
    }

    /* Timeline */
    .timeline{
      margin-top: 6px;
      border-radius: 22px;
      border: 1px solid rgba(16,24,38,.10);
      background: rgba(246,251,255,.68);
      padding: 16px 14px;
      overflow: hidden;
    }
    .timeline h3{
      margin: 0 0 10px;
      font-size: 14px;
      font-weight: 900;
      color: var(--charcoal);
      letter-spacing: .01em;
    }
    .steps{
      position: relative;
      display: grid;
      gap: 14px;
      padding-left: 18px;
    }
    .steps:before{
      content:"";
      position: absolute;
      left: 7px;
      top: 6px;
      bottom: 6px;
      width: 2px;
      background: linear-gradient(180deg, rgba(87,230,194,.85), rgba(16,24,38,.10));
      border-radius: 99px;
    }
    .step{
      position: relative;
      display: grid;
      gap: 3px;
      padding: 10px 12px;
      border-radius: 18px;
      border: 1px solid rgba(16,24,38,.10);
      background: rgba(255,255,255,.78);
      box-shadow: 0 12px 26px rgba(16,24,38,.06);
    }
    .step:before{
      content: attr(data-step);
      position: absolute;
      left: -18px;
      top: 14px;
      width: 22px;
      height: 22px;
      border-radius: 99px;
      background: rgba(255,255,255,.95);
      border: 1px solid rgba(16,24,38,.18);
      display: grid;
      place-items: center;
      font-size: 12px;
      font-weight: 900;
      color: #0b4f68;
      box-shadow: 0 10px 22px rgba(16,24,38,.10);
    }
    .step strong{
      font-size: 14px;
      color: var(--charcoal);
    }
    .step span{
      font-size: 13px;
      color: var(--muted);
    }

    /* Prev / Next */
    .prevNext{
      display: grid;
      gap: 10px;
      padding: 0 16px 16px;
    }
    .prevNext a{
      text-decoration: none;
      border-radius: 18px;
      border: 1px solid rgba(16,24,38,.12);
      background: rgba(255,255,255,.82);
      padding: 12px 14px;
      box-shadow: 0 12px 26px rgba(16,24,38,.08);
      transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
      color: var(--charcoal);
      display: grid;
      gap: 2px;
    }
    .prevNext a:hover{
      transform: translateY(-2px);
      box-shadow: 0 18px 44px rgba(16,24,38,.12);
      border-color: rgba(22,191,160,.30);
    }
    .prevNext small{
      color: var(--muted);
      letter-spacing: .08em;
      text-transform: uppercase;
      font-weight: 800;
      font-size: 11px;
    }
    .prevNext strong{
      font-size: 14px;
    }

    /* Comments */
    .commentsBlock{
      padding: 0 16px 18px;
      display: grid;
      gap: 12px;
    }
    .commentsEmpty{
      border-radius: 22px;
      border: 1px dashed rgba(16,24,38,.22);
      background: rgba(246,251,255,.62);
      padding: 14px;
      color: var(--muted);
    }
    .commentsEmpty h3{
      margin: 0 0 6px;
      font-size: 14px;
      font-weight: 900;
      color: var(--charcoal);
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .commentForm{
      border-radius: 22px;
      border: 1px solid rgba(16,24,38,.10);
      background: rgba(255,255,255,.84);
      padding: 14px;
      box-shadow: 0 14px 34px rgba(16,24,38,.08);
      display: grid;
      gap: 10px;
    }
    .commentGrid{
      display: grid;
      gap: 10px;
    }
    .formActions{
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
      padding-top: 2px;
    }

    /* Related */
    .related{
      padding: 0 16px 18px;
      display: grid;
      gap: 12px;
    }
    .related h3{
      margin: 0;
      font-size: 14px;
      font-weight: 920;
      color: var(--charcoal);
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .relatedGrid{
      display: grid;
      gap: 12px;
      grid-template-columns: 1fr;
    }
    .relCard{
      border-radius: 22px;
      border: 1px solid rgba(16,24,38,.10);
      background: rgba(246,251,255,.70);
      overflow: hidden;
      box-shadow: 0 14px 34px rgba(16,24,38,.08);
      transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
      text-decoration: none;
      color: var(--charcoal);
      display: grid;
      grid-template-columns: 110px 1fr;
      align-items: stretch;
    }
    .relCard:hover{
      transform: translateY(-2px);
      box-shadow: 0 18px 50px rgba(16,24,38,.12);
      border-color: rgba(22,191,160,.30);
      background: rgba(255,255,255,.86);
    }
    .relThumb{
      position: relative;
      border-right: 1px solid rgba(16,24,38,.10);
      background: rgba(255,255,255,.84);
    }
    .relThumb img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(.95) brightness(1.05);
      display: block;
      min-height: 86px;
    }
    .relBody{
      padding: 12px;
      display: grid;
      gap: 4px;
      min-width: 0;
    }
    .relBody strong{
      font-size: 14px;
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .relBody span{
      font-size: 13px;
      color: var(--muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Contacts */
    .contacts{
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 16px 44px;
      display: grid;
      gap: 16px;
    }
    .contactCard{
      border-radius: 26px;
      border: 1px solid rgba(16,24,38,.10);
      background: rgba(255,255,255,.88);
      box-shadow: var(--shadow-soft);
      overflow: hidden;
    }
    .contactGrid{
      display: grid;
      gap: 0;
    }
    .contactPane{
      padding: 16px;
      display: grid;
      gap: 10px;
    }
    .contactPane h2{
      margin: 0;
      font-size: 18px;
      font-weight: 860;
      color: var(--charcoal);
    }
    .contactPane p{
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }
    address{
      font-style: normal;
      color: var(--charcoal);
      border-radius: 18px;
      border: 1px solid rgba(16,24,38,.10);
      background: rgba(246,251,255,.70);
      padding: 12px 14px;
      display: grid;
      gap: 2px;
    }
    address strong{
      letter-spacing: .08em;
      text-transform: uppercase;
      font-size: 12px;
      color: var(--muted);
    }
    .map{
      border-top: 1px solid rgba(16,24,38,.10);
      background: rgba(246,251,255,.70);
      min-height: 260px;
    }
    .map iframe{
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
      filter: saturate(.9) contrast(.95) brightness(1.04);
    }

    /* Aside promos + header modal buttons */
    aside{
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 16px 52px;
      display: grid;
      gap: 12px;
    }
    .promoGrid{
      display: grid;
      gap: 12px;
      grid-template-columns: 1fr;
    }
    .promo{
      border-radius: 22px;
      border: 1px solid rgba(16,24,38,.10);
      background: linear-gradient(180deg, rgba(238,253,248,.70), rgba(255,255,255,.86));
      box-shadow: 0 16px 40px rgba(16,24,38,.08);
      padding: 14px 14px;
      display: grid;
      gap: 6px;
    }
    .promo h3{
      margin: 0;
      font-size: 15px;
      font-weight: 900;
      color: var(--charcoal);
    }
    .promo p{
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }
    .promo a{
      width: fit-content;
      margin-top: 4px;
    }

    /* Footer */
    footer{
      border-top: 1px solid rgba(16,24,38,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,251,255,.90));
      padding: 26px 16px;
    }
    .foot{
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      gap: 14px;
    }
    .slogan{
      font-weight: 900;
      letter-spacing: .01em;
      color: var(--charcoal);
      font-size: 16px;
    }
    .about{
      margin: 0;
      color: var(--muted);
      max-width: 90ch;
      font-size: 14px;
    }
    .social{
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
    }
    .social a{
      text-decoration: none;
      color: var(--charcoal);
      border-radius: 999px;
      border: 1px solid rgba(16,24,38,.12);
      background: rgba(255,255,255,.78);
      padding: 10px 12px;
      transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
      font-weight: 750;
      font-size: 13px;
    }
    .social a:hover{
      transform: translateY(-1px);
      border-color: rgba(22,191,160,.30);
      box-shadow: 0 14px 28px rgba(16,24,38,.10);
    }
    .copy{
      color: rgba(85,98,116,.95);
      font-size: 13px;
      border-top: 1px solid rgba(16,24,38,.10);
      padding-top: 12px;
    }

    /* Tablet */
    @media (min-width: 768px){
      .hero{ padding-top: 30px; }
      .hero h1{ font-size: 40px; }
      .heroGrid{
        grid-template-columns: 1.15fr .85fr;
        gap: 18px;
      }
      .heroInner{ padding: 24px; }
      .heroMeta{ grid-template-columns: 1fr; }
      .grid{ grid-template-columns: repeat(2, 1fr); }
      .thumb{ height: 180px; }
      .relatedGrid{ grid-template-columns: repeat(2, 1fr); }
      .prevNext{ grid-template-columns: 1fr 1fr; }
      .commentGrid{ grid-template-columns: 1fr 1fr; }
      .contactGrid{ grid-template-columns: 1.1fr .9fr; }
      .map{ border-top: 0; border-left: 1px solid rgba(16,24,38,.10); min-height: 360px; }
      .promoGrid{ grid-template-columns: repeat(2, 1fr); }
      .panel{ width: 360px; }
    }

    /* Desktop */
    @media (min-width: 1200px){
      nav ul{ display: flex; }
      details.burger{ display: none; }
      .ctaRow{ display: flex; }

      .topbar{
        grid-template-columns: 1fr auto auto;
      }

      .hero{ padding: 38px 16px 18px; }
      .hero h1{ font-size: 46px; }
      .heroInner{ padding: 28px; }
      .heroMeta{ grid-template-columns: 1fr; }

      .grid{ grid-template-columns: repeat(3, 1fr); }
      .thumb{ height: 190px; }

      .promoGrid{ grid-template-columns: repeat(4, 1fr); }
    }

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