:root{
  --bg:#07090c;
  --bg2:#050608;

  --text:#e6eef7;
  --muted:#a9b6c6;

  /* Gen FUTURE blue/cyan palette */
  --accent:#6bb8ff;   /* electric blue */
  --accent2:#7fe6ff;  /* cyan */
  --accent3:#2b6cff;  /* deep blue (sparingly) */

  --line:#233142;

  --radius:16px;
  --shadow:0 14px 40px rgba(0,0,0,.35);
  --shadow2:0 10px 26px rgba(0,0,0,.24);

  --note-blue:#6bb8ff;
  --note-yellow:#ffcc66;
  --note-green:#77e3a1;
  --note-orange:#ff9b66;

  --note-bg: rgba(255,255,255,.03);
  --note-bg2: rgba(255,255,255,.018);

  --note-bar:3px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:var(--text);
  font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;

  background:
    radial-gradient(1200px 700px at 18% 0%, rgba(107,184,255,.14), transparent 62%),
    radial-gradient(1050px 740px at 86% 8%, rgba(127,230,255,.12), transparent 64%),
    radial-gradient(900px 700px at 50% 120%, rgba(43,108,255,.07), transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  background-attachment: fixed;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(900px 560px at 12% 12%, rgba(107,184,255,.12), transparent 62%),
    radial-gradient(820px 560px at 88% 16%, rgba(127,230,255,.10), transparent 62%),
    radial-gradient(760px 520px at 55% 105%, rgba(43,108,255,.06), transparent 62%);
  opacity:.55;
  filter:saturate(112%);
}

.skip-link{
  position:absolute; left:-999px; top:10px;
  padding:10px 14px;
  border-radius:10px;
  background:rgba(107,184,255,.18);
  border:1px solid rgba(107,184,255,.35);
  color:var(--text);
  text-decoration:none;
  z-index:9999;
}
.skip-link:focus{ left:12px; outline:none; }

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{ max-width:1100px; margin:0 auto; padding:0 18px; }

h1{
  margin:0 0 6px;
  font-size:32px;
  text-align:left;
  font-weight:600;
  letter-spacing:.3px;
  color:var(--text);
}

.summary{
  text-align:left;
  margin:0 0 16px;
  color:var(--muted);
  font-size:16px;
  line-height:1.6;
}

.meta{
  text-align:left;
  margin-bottom:2px;
  color:var(--muted);
  font-size:16px;
  line-height:1.6;
  position:relative;
}

header{
  position:relative;
  padding:22px 18px 18px;
  border-bottom:1px solid rgba(35,49,66,.9);
  background:
    radial-gradient(900px 520px at 18% 0%, rgba(107,184,255,.12), transparent 65%),
    radial-gradient(800px 520px at 86% 0%, rgba(127,230,255,.10), transparent 65%),
    linear-gradient(180deg, rgba(8,10,13,.72), rgba(8,10,13,.18));
  backdrop-filter: blur(6px);
}

/* LAYOUT: logo always centered, lang right on desktop, centered under logo on mobile */
.topbar{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:14px;
  padding:8px 0 6px;
}

.topbar .spacer{
  width:auto;
  flex:none;
  min-height:1px;
}

.hero{
  padding:12px 0 8px;
  text-align:center;
  justify-self:center;
}

.lang{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  width:auto;
  flex:none;
  justify-self:end;
}

.flag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:var(--shadow2);
  transform:translateY(0);
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, filter .18s ease;
  user-select:none;
  cursor:pointer;
  color:var(--text);
  text-decoration:none;
}
.flag:hover{
  transform:translateY(-2px);
  border-color:rgba(107,184,255,.40);
  background:linear-gradient(180deg, rgba(107,184,255,.10), rgba(255,255,255,.02));
  filter:saturate(1.12);
  box-shadow:0 16px 34px rgba(0,0,0,.34);
  text-decoration:none;
}
.flag:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(107,184,255,.20), 0 16px 34px rgba(0,0,0,.34);
  border-color:rgba(107,184,255,.52);
}

.flag svg{ display:block; width:18px; height:12px; border-radius:2px; }
.flag .lbl{ font-size:12px; color:var(--muted); letter-spacing:.35px; }

/* HOTF standalone logo/wordmark (no box) — Gen FUTURE blue/cyan scheme */
.brand{
  display:inline-block;
  position:relative;
  margin:0;

  font-size:56px;
  letter-spacing:1.15px;
  line-height:1.06;

  font-weight:500;
  text-transform:none;

  background:linear-gradient(
    90deg,
    rgba(107,184,255,1) 0%,
    rgba(127,230,255,1) 55%,
    rgba(107,184,255,1) 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  filter:
    drop-shadow(0 10px 22px rgba(0,0,0,.35))
    drop-shadow(0 6px 16px rgba(107,184,255,.18))
    drop-shadow(0 0 1px rgba(127,230,255,.32));

  animation:floaty 6.6s ease-in-out infinite;
}

.brand::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-14px;

  width:150px;
  height:3px;
  border-radius:999px;

  background:linear-gradient(
    90deg,
    rgba(107,184,255,0) 0%,
    rgba(107,184,255,.75) 35%,
    rgba(127,230,255,.85) 55%,
    rgba(107,184,255,.75) 75%,
    rgba(107,184,255,0) 100%
  );

  opacity:.82;
  filter:
    drop-shadow(0 6px 14px rgba(0,0,0,.32))
    drop-shadow(0 0 10px rgba(127,230,255,.14));

  animation:pulse 2.8s ease-in-out infinite;
}

.brand::before{
  content:"";
  position:absolute;
  inset:-16px -24px -18px -24px;
  pointer-events:none;
  background:
    radial-gradient(240px 95px at 50% 52%, rgba(127,230,255,.10), transparent 68%),
    radial-gradient(260px 105px at 55% 45%, rgba(107,184,255,.10), transparent 70%);
  opacity:.55;
  filter:blur(10px);
  animation:glow 5.8s ease-in-out infinite;
}

@keyframes floaty{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

@keyframes pulse{
  0%,100%{ opacity:.55; width:130px; }
  50%{ opacity:.98; width:210px; }
}

@keyframes glow{
  0%,100%{ opacity:.45; transform:translateY(0); }
  50%{ opacity:.68; transform:translateY(-4px); }
}

/* Nav always centered below logo+lang on desktop, and below lang on mobile */
.nav-row{
  margin:16px auto 4px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  padding:0;
  list-style:none;
}

.nav-row a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  color:var(--text);
  text-decoration:none;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.nav-row a:hover{
  transform:translateY(-2px);
  border-color:rgba(107,184,255,.40);
  background:linear-gradient(180deg, rgba(107,184,255,.10), rgba(255,255,255,.02));
  box-shadow:0 14px 28px rgba(0,0,0,.26);
}
.nav-row a[aria-current="page"]{
  border-color:rgba(127,230,255,.32);
  background:linear-gradient(180deg, rgba(127,230,255,.10), rgba(255,255,255,.02));
}

main{ padding:26px 0 70px; }

section{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(35,49,66,.95);
  border-radius:var(--radius);
  padding:18px 18px 8px;
  margin:16px 0;
  box-shadow:var(--shadow);
  overflow:hidden;
}

section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(240px 130px at 0% 0%, rgba(107,184,255,.08), transparent 65%),
    radial-gradient(240px 130px at 100% 100%, rgba(127,230,255,.07), transparent 65%);
  opacity:.95;
}

h2{ margin:4px 0 10px; font-size:22px; position:relative; }

/* ADDED: h3 styling (from CSS #2) */
h3{ margin:18px 0 8px; font-size:18px; color:#d7e8ff; position:relative; }

p,li{ color:var(--text); position:relative; }
.muted{ color:var(--muted); }

.note{
  border-left:3px solid var(--accent);
  padding:10px 12px;
  margin:10px 0 14px;
  background:rgba(107,184,255,.06);
  border-radius:12px;
  position:relative;
}

/* ADDED: semantic warning note variant (uses existing palette) */
.note.warn{
  border-left-color:var(--note-yellow);
  background:rgba(255,204,102,.07);
}

.articles{
  list-style:none;
  padding:0;
  margin:8px 0 12px;
  position:relative;
}
.articles li{
  margin:10px 0;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:0 10px 22px rgba(0,0,0,.16);
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.articles li:hover{
  transform:translateY(-2px);
  border-color:rgba(127,230,255,.28);
  background:linear-gradient(180deg, rgba(127,230,255,.08), rgba(255,255,255,.02));
  box-shadow:0 14px 28px rgba(0,0,0,.22);
}
.articles a{
  display:block;
  color:var(--text);
  text-decoration:none;
}
.articles a:hover{ text-decoration:none; }
.articles .meta{
  display:block;
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}

/* === NOTES: no extra vertical space === */
.note{
  --note-accent: var(--note-blue);
  padding:14px 14px 14px 16px;
  margin:12px 0 16px;
  border-radius:14px;
  background:linear-gradient(180deg, var(--note-bg), var(--note-bg2));
  border:1px solid rgba(35,49,66,.95);
  border-left:var(--note-bar) solid var(--note-accent);
  box-shadow:var(--shadow2), inset 0 0 0 1px rgba(0,0,0,.10);
  filter: drop-shadow(-2px 0 10px rgba(0,0,0,.10));
}

/* remove paragraph margins inside notes */
.note > *:first-child{ margin-top:0; }
.note > *:last-child{ margin-bottom:0; }

.note.note-blue{ --note-accent: var(--note-blue); }
.note.note-yellow{ --note-accent: var(--note-yellow); }
.note.note-green{  --note-accent: var(--note-green); }
.note.note-orange{ --note-accent: var(--note-orange); }

/* Override note.warn to stay in blue Gen FUTURE palette */
.note.warn{
  --note-accent: var(--note-blue);
  border-left-color: var(--note-blue);

  background:linear-gradient(
    180deg,
    rgba(107,184,255,.10),
    rgba(107,184,255,.04)
  );

  color:var(--text);
}

/* ADDED: pill/badge (from CSS #2) */
.pill{
  display:inline-block;
  padding:2px 10px;
  border-radius:10px;
  border:1px solid rgba(35,49,66,.9);
  background:rgba(255,255,255,.03);
  font-size:12px;
  color:var(--muted);
  vertical-align:middle;
}

/* === ADDED: grid + cards (from CSS #2) so HTML blocks are styled === */
.grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:14px;
  position:relative;
}

.card{
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-radius:14px;
  padding:14px;
  box-shadow:0 12px 26px rgba(0,0,0,.22);
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  min-height:120px;
  position:relative;
  overflow:hidden;
}

.card:hover{
  transform:translateY(-3px);
  border-color:rgba(107,184,255,.30);
  background:linear-gradient(180deg, rgba(107,184,255,.08), rgba(255,255,255,.02));
  box-shadow:0 18px 36px rgba(0,0,0,.30);
}

.card::before{
  content:"";
  position:absolute;
  top:10px;
  right:10px;
  width:26px;
  height:26px;
  border-top:1px solid rgba(255,255,255,.10);
  border-right:1px solid rgba(255,255,255,.10);
  border-radius:2px;
  opacity:.65;
}

.card h3{ margin:0 0 8px; font-size:18px; }
.card p{ margin:0; color:var(--muted); }

.span-6{ grid-column:span 6; }
.span-4{ grid-column:span 4; }
.span-8{ grid-column:span 8; }
.span-12{ grid-column:span 12; }
/* === END ADDED === */

/* ADDED: CTA row + buttons (from CSS #2) */
.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:12px 0 14px;
  position:relative;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  color:var(--text);
  text-decoration:none;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn:hover{
  transform:translateY(-2px);
  border-color:rgba(127,230,255,.35);
  background:linear-gradient(180deg, rgba(127,230,255,.10), rgba(255,255,255,.02));
  text-decoration:none;
  box-shadow:0 14px 28px rgba(0,0,0,.26);
}
.btn.secondary:hover{
  border-color:rgba(107,184,255,.35);
  background:linear-gradient(180deg, rgba(107,184,255,.10), rgba(255,255,255,.02));
}

/* === ADDED: quote block (from CSS #2) === */
.quote{
  margin:0;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.18));
  color:var(--text);
  box-shadow:0 10px 22px rgba(0,0,0,.18);
  position:relative;
  overflow:hidden;
}

.quote::before{
  content:"";
  position:absolute;
  left:-20%;
  top:0;
  width:40%;
  height:100%;
  background:linear-gradient(
    180deg,
    rgba(107,184,255,.0),
    rgba(107,184,255,.14),
    rgba(127,230,255,.10),
    rgba(127,230,255,.0)
  );
  transform:skewX(-12deg);
  opacity:.50;
  animation:quoteScan 7.4s ease-in-out infinite;
  pointer-events:none;
}

@keyframes quoteScan{
  0%{ transform:translateX(-60%) skewX(-12deg); opacity:0; }
  16%{ opacity:.50; }
  46%{ transform:translateX(260%) skewX(-12deg); opacity:.24; }
  70%{ opacity:0; }
  100%{ transform:translateX(260%) skewX(-12deg); opacity:0; }
}

.quote .q{
  font-size:16px;
  margin:0;
  position:relative;
}

.quote .by{
  margin:8px 0 0;
  color:var(--muted);
  font-size:13px;
  position:relative;
}
/* === END ADDED === */

/* ADDED: tagline base is muted, but strong inside is white */
.tagline{
  margin:18px auto 0;
  max-width:900px;
  color:var(--muted);
  font-size:16px;
  text-align:left;
}
.tagline strong{
  color:var(--text);
  font-weight:700;
}

footer{
  border-top:1px solid rgba(35,49,66,.9);
  padding:22px 18px;
  background:linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,.34));
}
.small{ font-size:13px; color:var(--muted); }

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

/* ADDED: tablet breakpoint for grid spans (from CSS #2) */
@media (max-width: 860px){
  .grid{ grid-template-columns:repeat(6, 1fr); }
  .span-6,.span-4,.span-8,.span-12{ grid-column:span 6; }
}

/* Mobile: lang centered under logo; nav centered under lang */
@media (max-width: 520px){
  .topbar{
    grid-template-columns: 1fr;
    justify-items:center;
    gap:10px;
  }

  .topbar .spacer{ display:none; }

  .hero{
    padding:12px 0 0;
    text-align:center;
    justify-self:center;
  }

  .lang{
    justify-self:center;
    justify-content:center;
    margin-top:6px;
  }

  .brand{ font-size:52px; }
  .flag .lbl{ display:none; }

  /* responsive grid spans */
  .grid{ grid-template-columns:repeat(6, 1fr); }
  .span-6,.span-4,.span-8,.span-12{ grid-column:span 6; }
}

@media print{
  body{ background:#fff; color:#000; }
  header,footer,section{ box-shadow:none; }
  section{ border:1px solid #ddd; background:#fff; }
  a{ color:#000; text-decoration:underline; }
  .flag, .articles li{ border:1px solid #ddd; background:#fff; box-shadow:none; }
  .brand{ color:#000; -webkit-text-fill-color:#000; background:none; filter:none; }
  body::before, .brand::before, .brand::after, section::before{ display:none; }

  /* print reset for cards */
  .card{ border:1px solid #ddd; background:#fff; box-shadow:none; }
  .card::before{ display:none; }

  /* print reset for quote */
  .quote{ border:1px solid #ddd; background:#fff; box-shadow:none; }
  .quote::before{ display:none; }

  /* print reset for buttons */
  .btn{ border:1px solid #ddd; background:#fff; box-shadow:none; }
}

/* ================================
   TABLES (from the other CSS sets)
   ================================ */

.table-wrap{
  width:100%;
  overflow:auto;           /* mobile safety */
  border-radius:14px;      /* uses existing style language */
}

table{
  width:100%;
  border-collapse:collapse;
  margin:10px 0 14px;
  font-size:14px;
  border:1px solid rgba(35,49,66,.95); /* close to --line */
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}

th, td{
  padding:10px;
  border-bottom:1px solid rgba(35,49,66,.95);
  vertical-align:top;
}

th{
  background:rgba(255,255,255,.03);
  color:#d7e8ff;
  text-align:left;
  font-weight:650;
}

tr:last-child td{ border-bottom:0; }

/* Optional: subtle hover for dense tables */
tbody tr:hover td{
  background:rgba(107,184,255,.04);
}

/* ================================
   SECTION GROUPING / FIELD GROUPS
   ================================ */

.group{
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border-radius:14px;
  padding:14px;
  margin:12px 0 14px;
  box-shadow:var(--shadow2);
  position:relative;
}

.group-title{
  margin:0 0 10px;
  font-size:14px;
  letter-spacing:.35px;
  color:var(--muted);
  text-transform:uppercase;
}

.field-row{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:12px;
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,.06);
}

.field-row:first-of-type{ border-top:0; padding-top:0; }

.field-label{
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
}

.field-value{
  color:var(--text);
  min-width:0;
}

/* Compact “pill value” inside fields */
.value-pill{
  display:inline-block;
  padding:2px 10px;
  border-radius:999px;
  border:1px solid rgba(35,49,66,.95);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:12px;
}

/* Responsive: field rows stack nicely */
@media (max-width: 680px){
  .field-row{ grid-template-columns: 1fr; }
}

/* ================================
   TOC (like CSS #2 .toc)
   ================================ */

.toc{
  margin:0;
  padding:0;
  display:grid;
  gap:6px;
  list-style:none;
}

.toc a{
  display:block;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
  border-radius:12px;
  color:var(--text);
  text-decoration:none;
}

.toc a:hover{
  border-color:rgba(107,184,255,.40);
  background:rgba(107,184,255,.06);
  text-decoration:none;
}

/* ================================
   COPY FIELDS (new, but consistent)
   No new :root variables
   ================================ */

.copy{
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.14));
  border-radius:14px;
  padding:12px;
  margin:10px 0 14px;
  box-shadow:var(--shadow2);
  position:relative;
  overflow:hidden;
}

.copy-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 10px;
}

.copy-title{
  margin:0;
  font-size:13px;
  color:var(--muted);
  letter-spacing:.2px;
}

.copy pre{
  margin:0;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.22);
  color:#d8f1ff;
  overflow:auto;
  white-space:pre;
  tab-size:2;
}

/* If you want wrapped code for long lines */
.copy pre.wrap{
  white-space:pre-wrap;
  word-break:break-word;
}

.copy .btn{
  padding:8px 10px;
  border-radius:12px;
  font-size:13px;
  line-height:1;
}

/* small status text like “Copied!” */
.copy-status{
  margin:8px 0 0;
  font-size:12px;
  color:var(--muted);
}

/* make the copy <pre> wrap to site width (no horizontal scrollbar) */
    .copy pre{
      white-space: pre-wrap;
      word-break: break-word;
      overflow-x: hidden;
      tab-size: 2;
    }
  
/* ================================
   PRINT tweaks for tables + copy
   ================================ */

@media print{
  table{
    border:1px solid #ddd;
    background:#fff;
  }
  th,td{ border-bottom:1px solid #ddd; color:#000; }
  th{ background:#f5f5f5; color:#000; }

  .group,.copy{
    border:1px solid #ddd;
    background:#fff;
    box-shadow:none;
  }
  .copy pre{
    border:1px solid #ddd;
    background:#f5f5f5;
    color:#000;
  }
}