:root{
    --bg:#070b14; --bg2:#0b1220; --panel:#0f1729; --panel2:#121d33;
    --line:#1d2a45; --txt:#e8eef8; --muted:#8fa3c0; --accent:#5fd0ff;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:radial-gradient(1100px 550px at 75% -10%, #13223d 0%, var(--bg) 55%) fixed, var(--bg);
    color:var(--txt); font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif; line-height:1.6;
  }
  .wrap{max-width:1180px;margin:0 auto;padding:0 26px}

  /* ---------- HERO ---------- */
  .hero{padding:90px 0 60px;text-align:center;position:relative}
  .kicker{letter-spacing:.35em;font-size:.72rem;color:var(--accent);text-transform:uppercase;margin-bottom:22px}
  h1{
    font-size:clamp(2rem,5.4vw,3.6rem);font-weight:800;line-height:1.12;
    background:linear-gradient(92deg,#ffffff 10%,#5fd0ff 45%,#b98cff 75%,#ff6a5f 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero p{max-width:720px;margin:22px auto 0;color:var(--muted);font-size:1.06rem}
  .stats{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px}
  .stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 22px;font-size:.85rem;color:var(--muted)}
  .stat b{display:block;font-size:1.25rem;color:var(--txt)}

  /* ---------- SECTIONS ---------- */
  section{padding:56px 0}
  .sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:8px}
  .sec-num{font-size:.8rem;letter-spacing:.3em;color:var(--accent)}
  h2{font-size:1.7rem;font-weight:750}
  .rule{height:1px;flex:1;background:linear-gradient(90deg,var(--line),transparent)}
  .sec-intro{color:var(--muted);max-width:840px;margin-bottom:34px}
  .sec-intro em{color:#cfe3ff;font-style:normal;border-bottom:1px dotted var(--accent)}

  /* ---------- FLAME FAMILIES ---------- */
  .family{margin-bottom:40px}
  .family h3{font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:12px}
  .family h3::after{content:"";height:2px;flex:1;border-radius:2px;background:linear-gradient(90deg,var(--fc,#5fd0ff),transparent)}
  .family h3 .dot{width:14px;height:14px;border-radius:50%;background:var(--fc,#5fd0ff);box-shadow:0 0 14px var(--fc,#5fd0ff)}
  .chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:14px}
  .chip{
    background:linear-gradient(180deg,var(--panel2),var(--panel));
    border:1px solid var(--line);border-left:3px solid var(--c);
    border-radius:14px;padding:16px 18px;transition:transform .25s,box-shadow .25s;
  }
  .chip:hover{transform:translateY(-5px);box-shadow:0 10px 30px -10px var(--c)}
  .chip .top{display:flex;align-items:center;gap:14px}
  .swatch{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffffff55,var(--c) 60%);box-shadow:0 0 18px var(--c),0 0 42px -6px var(--c);flex:none}
  .sym{font-size:1.45rem;font-weight:800}
  .nm{color:var(--muted);font-size:.82rem}
  .shade{margin-top:10px;font-size:.92rem;color:#d5e2f5}
  .wave{margin-top:6px;font-family:Consolas,Menlo,monospace;font-size:.74rem;color:var(--muted)}
  .wave b{color:var(--c);font-weight:600}
  .note{margin-top:8px;font-size:.78rem;color:var(--muted);font-style:italic}

  /* ---------- SPECTRUM BAR ---------- */
  .spectrum-box{margin-top:44px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 26px 40px}
  .spectrum-box h4{font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
  .spectrum{position:relative;height:26px;border-radius:13px;
    background:linear-gradient(90deg,#7a2bff 0%,#3a4bff 15%,#00b3ff 28%,#00e08a 42%,#b6ff00 55%,#ffd400 66%,#ff7a00 78%,#ff1a1a 90%,#a00000 100%);}
  .tick{position:absolute;top:-8px;width:1px;height:42px;background:#ffffff55}
  .tick span{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-family:Consolas,monospace;font-size:.68rem;color:#dbe7f8;white-space:nowrap}
  .tick i{position:absolute;top:44px;left:50%;transform:translateX(-50%);font-style:normal;font-size:.66rem;color:var(--muted);white-space:nowrap}
  .scale{display:flex;justify-content:space-between;font-family:Consolas,monospace;font-size:.68rem;color:var(--muted);margin-top:22px}

  /* ---------- PROPERTIES ---------- */
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
  .card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:16px;padding:24px;transition:transform .25s,border-color .25s}
  .card:hover{transform:translateY(-4px);border-color:#2c4068}
  .card .icon{font-size:1.5rem}
  .card h4{margin:12px 0 10px;font-size:1.08rem}
  .card p{color:var(--muted);font-size:.92rem}
  .data{margin:14px 0;border-top:1px solid var(--line)}
  .row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed #1a2740;font-size:.86rem}
  .row span:first-child{color:#c7d6ee}
  .row span:last-child{font-family:Consolas,monospace;color:var(--accent)}
  .tagline{font-size:.82rem;color:#9fe8c0;margin-top:10px}

  /* ---------- INVENTIONS ---------- */
  .inv{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px}
  .invcard{position:relative;background:linear-gradient(180deg,#101c34,var(--panel));border:1px solid var(--line);border-radius:16px;padding:26px 24px;overflow:hidden;transition:transform .25s}
  .invcard:hover{transform:translateY(-4px)}
  .invcard::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--ic),transparent)}
  .badge{display:inline-block;font-family:Consolas,monospace;font-weight:700;font-size:.8rem;color:var(--bg);background:var(--ic);border-radius:8px;padding:3px 10px;margin-bottom:14px}
  .invcard h4{font-size:1.1rem;margin-bottom:10px}
  .invcard p{color:var(--muted);font-size:.92rem;margin-bottom:10px}
  .ex{font-size:.85rem;border-left:2px solid var(--ic);padding-left:12px;color:#c7d6ee}
  .tags{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
  .tag{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:3px 10px}

  /* ---------- VISION / FOOTER ---------- */
  .vision{text-align:center;padding:70px 20px;margin:40px 0;border:1px solid var(--line);border-radius:22px;
    background:radial-gradient(600px 260px at 50% 0%,#16264a66,transparent),var(--panel)}
  .vision blockquote{font-size:clamp(1.2rem,2.6vw,1.7rem);font-weight:650;max-width:760px;margin:0 auto;line-height:1.5}
  .vision cite{display:block;margin-top:20px;color:var(--muted);font-size:.85rem;font-style:normal;letter-spacing:.25em;text-transform:uppercase}
  footer{text-align:center;color:var(--muted);font-size:.78rem;padding:30px 0 50px}