:root{
  --bg: #eef3ff;
  --panel: rgba(255,255,255,0.75);
  --panel-strong: rgba(255,255,255,0.9);
  --text: #0c1226;
  --muted: #586480;
  --brand: #1169ff;
  --accent: #ff8a00;
  --line: rgba(17,24,39,0.08);
  --radius: 18px;
  --shadow: 0 10px 30px rgba(53,84,209,.15);
  --maxw: 1200px;
}
* { box-sizing: border-box; }
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, 'Helvetica Neue', Arial, 'Apple Color Emoji','Segoe UI Emoji';
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(37,99,255,.18), transparent 60%),
    radial-gradient(900px 600px at 10% -20%, rgba(255,138,0,.12), transparent 60%),
    linear-gradient(180deg, #f7f9ff 0%, #eef3ff 60%, #eaf0ff 100%);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:var(--maxw); margin-inline:auto; padding-inline:20px}
header{position:sticky; top:0; z-index:50; backdrop-filter: blur(12px) saturate(140%);
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55));
  border-bottom: 1px solid var(--line); box-shadow: 0 6px 20px rgba(17,24,39,.06)}
.nav{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{display:flex; align-items:center; gap:.6rem}
.brand img{height:42px; width:auto; border-radius:4px}
.brand .tagline{font-size:.85rem; letter-spacing:.06em; margin-top:2px;
  background: linear-gradient(90deg, #6fb0ff, #ffc37a, #6fb0ff); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color: transparent; animation: shimmer 8s ease-in-out infinite; opacity:.9}
@keyframes shimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.menu{display:flex; gap:22px; align-items:center}
.menu a{color:#32425f; position:relative; transition: color .2s ease}
.menu a.active::after, .menu a:hover::after{content:""; position:absolute; left:0; right:0; bottom:-8px; height:3px;
  background: linear-gradient(90deg, var(--brand), var(--accent)); border-radius:999px}
/* Mobile menu */
.hamb{ display:none }
@media (max-width: 760px){
  .menu{ display:none }
  .hamb{
    display:inline-flex; align-items:center; gap:.4rem;
    border:1px solid var(--line); background:var(--panel); color:#111827;
    padding:.55rem .8rem; border-radius:10px; font-size:.95rem; cursor:pointer;
  }
}
.mobile-overlay{ position: fixed; inset:0; background: rgba(3,7,18,.45);
  opacity:0; visibility:hidden; transition: opacity .2s ease, visibility .2s ease; z-index: 60}
.mobile-menu{ position: fixed; top:0; right:0; height:100vh; width:min(88vw, 360px);
  background: var(--panel); border-left:1px solid var(--line); box-shadow: var(--shadow);
  transform: translateX(100%); transition: transform .25s ease; z-index: 61;
  display:flex; flex-direction:column; gap:10px; padding:18px}
.mobile-menu header{ display:flex; align-items:center; justify-content:space-between; height:auto; border-bottom:1px solid var(--line) }
.mobile-menu a{ display:block; padding:12px 10px; border-radius:12px; color:#25324a }
.mobile-menu a:hover{ background: rgba(17,105,255,.08) }
.mobile-open .mobile-menu{ transform: translateX(0) }
.mobile-open .mobile-overlay{ opacity:1; visibility:visible }
body.mobile-open{ overflow:hidden }

.btn{display:inline-flex; align-items:center; gap:.5rem; background: linear-gradient(135deg, var(--brand), #3c86ff 40%, var(--accent) 120%); color:#fff; padding:.9rem 1.1rem; border-radius:12px; font-weight:800; border:1px solid rgba(17,105,255,.25); box-shadow: 0 10px 24px rgba(37,99,255,.25), 0 4px 10px rgba(0,0,0,.08); transform: translateY(0); transition: transform .15s ease, box-shadow .2s ease, filter .2s ease}
.btn:hover{ transform: translateY(-2px); filter: brightness(1.02); box-shadow: 0 14px 28px rgba(37,99,255,.28), 0 6px 14px rgba(0,0,0,.10) }
.btn.outline{background: linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,255,255,.9)); color:#111827; border:1px solid var(--line); box-shadow: 0 6px 16px rgba(0,0,0,.06)}

.eyebrow{display:inline-block; letter-spacing:.12em; text-transform:uppercase; font-weight:800; font-size:.72rem; color:#111827; padding:.35rem .6rem; border-radius:999px; background:#e8f0ff}
.hero{padding:72px 0 32px; text-align:center; background:
  radial-gradient(1300px 580px at 50% -25%, rgba(37,99,255,.20), transparent 70%),
  radial-gradient(1200px 520px at 20% -15%, rgba(255,138,0,.18), transparent 70%);
  position:relative; overflow:hidden}
.hero::after{content:""; position:absolute; inset:-20% -10% auto -10%; height: 220px; background: radial-gradient(50% 60% at 50% 50%, rgba(255,255,255,.65), transparent 70%); filter: blur(30px)}
h1{font-size:clamp(2rem, 1.2rem + 3.8vw, 3.4rem); margin:0}
.title{font-size:clamp(1.6rem, 1rem + 2vw, 2.2rem); margin:.2rem 0 .6rem}
.text-muted{color:var(--muted)}
.section{padding-block:72px}
.grid{display:grid; gap:22px}
.card{position: relative; background: var(--panel); border:1px solid var(--line); backdrop-filter: blur(10px); border-radius: var(--radius); overflow: hidden; transform: perspective(800px) rotateX(0) rotateY(0) translateY(0); transition: transform .25s ease, box-shadow .25s ease}
.card::before{content:""; position:absolute; inset:0; pointer-events:none; border-radius: inherit; padding:1px; background: linear-gradient(135deg, rgba(17,105,255,.35), rgba(255,138,0,.35)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude}
.card:hover{ transform: perspective(800px) rotateX(1deg) rotateY(-1deg) translateY(-4px); box-shadow: 0 18px 34px rgba(17,24,39,.10), 0 8px 16px rgba(0,0,0,.06) }
.card .pad{ padding: 22px }
.badge{ border: none; background: linear-gradient(180deg, rgba(37,99,255,.10), rgba(255,138,0,.10)); color: #244062 }
footer{border-top:1px solid var(--line); padding:28px 0; color:#63728f; text-align:center; background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.9)) }
input, textarea{background:var(--panel-strong); border:1px solid var(--line); color:#111827; padding:12px; border-radius:12px; width:100%; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); transition: box-shadow .2s ease, border-color .2s ease}
textarea{min-height:130px; resize:vertical}
input:focus, textarea:focus{ outline:none; border-color: rgba(17,105,255,.45); box-shadow: 0 0 0 3px rgba(17,105,255,.12) }

/* Hero title cooler style (no dash) */
.hero-title{
  margin:0; font-weight:900; letter-spacing:.01em; line-height:1.1;
  font-size: clamp(2rem, 1.2rem + 3.8vw, 3.4rem);
  display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; text-align:center; position:relative;
}
.hero-title .brand-line{
  background: linear-gradient(90deg, #1169ff, #7ab4ff);
  -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.hero-title .focus-line{
  background: linear-gradient(90deg, #ff8a00, #ffbf66 60%, #1169ff 120%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 4px 14px rgba(17,105,255,.18)); position:relative;
}
.hero-title .focus-line::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px;
  background: linear-gradient(90deg, #1169ff, #ff8a00); border-radius:999px; opacity:.85;
  transform-origin:left; transform: scaleX(0); animation: underline-in .9s ease .15s forwards;
}
@keyframes underline-in{ to{ transform: scaleX(1) } }
.hero-kicker{ margin:10px auto 0; color: var(--muted); font-weight:600; letter-spacing:.06em; text-transform: uppercase; font-size:.85rem; opacity:.9 }

/* Dark mode polish */
body.theme-dark{
  --bg: #0b0f1a; --panel: rgba(15,17,23,.6); --panel-strong: rgba(19,23,33,.85);
  --text: #eaf1ff; --muted: #a1acc4; --brand: #7aa7ff; --accent: #ffb066; --line: rgba(255,255,255,.08);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(122,167,255,.18), transparent 60%),
    radial-gradient(900px 600px at 10% -20%, rgba(255,176,102,.16), transparent 60%),
    linear-gradient(180deg, #0b0f1a, #0b0f1a);
}
body.theme-dark .badge{ background: linear-gradient(180deg, rgba(122,167,255,.14), rgba(255,176,102,.12)); color: #cfd9f4 }
body.theme-dark input, body.theme-dark textarea{ background: var(--panel-strong); border-color: var(--line); box-shadow: none }
body.theme-dark input:focus, body.theme-dark textarea:focus{ border-color: rgba(122,167,255,.45); box-shadow: 0 0 0 3px rgba(122,167,255,.16) }

/* HCM matrix */
table.hcm-matrix{ width:100%; border-collapse:separate; border-spacing:0; font-size:.95rem }
.hcm-matrix thead th{ position:sticky; top:0; background:var(--panel); border-bottom:1px solid var(--line); text-align:left; padding:10px 12px }
.hcm-matrix td, .hcm-matrix th{ padding:10px 12px; border-bottom:1px solid var(--line) }
.hcm-matrix tbody tr:hover{ background:#fff4e6 }
body.theme-dark .hcm-matrix tbody tr:hover{ background:#181d2b }

/* Icon-only hamburger button tweaks */
.hamb{ padding: .55rem .65rem }
.hamb svg{ display:block }

/* === Cooler mobile menu polish === */
.mobile-overlay{
  backdrop-filter: blur(3px) saturate(110%);
  background: radial-gradient(120% 120% at 70% -10%, rgba(17,105,255,.18), transparent 60%),
              rgba(3,7,18,.45);
}
.mobile-menu{
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.78));
  backdrop-filter: blur(12px) saturate(140%);
  border-left: 1px solid var(--line);
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
  box-shadow: 0 18px 40px rgba(17,24,39,.18);
  transition: transform .32s cubic-bezier(.2,.8,.2,1);
}
.mobile-menu header{
  background: linear-gradient(90deg, rgba(17,105,255,.10), rgba(255,138,0,.08));
  border-radius: 14px;
  padding: 10px 12px;
}
.mobile-menu a{
  display:flex; align-items:center; gap:.6rem;
  font-weight: 650;
  color:#10203c;
  background: linear-gradient(180deg, rgba(17,105,255,.06), rgba(255,138,0,.06));
  border: 1px solid color-mix(in oklab, var(--line) 70%, #fff);
  margin: 4px 0;
}
.mobile-menu a:hover{
  background: linear-gradient(180deg, rgba(17,105,255,.12), rgba(255,138,0,.10));
  transform: translateX(2px);
}
.mobile-open .mobile-menu nav a{
  opacity:0; transform: translateY(8px);
  animation: riseIn .35s ease forwards;
}
.mobile-open .mobile-menu nav a:nth-child(1){ animation-delay: .02s }
.mobile-open .mobile-menu nav a:nth-child(2){ animation-delay: .06s }
.mobile-open .mobile-menu nav a:nth-child(3){ animation-delay: .10s }
.mobile-open .mobile-menu nav a:nth-child(4){ animation-delay: .14s }
.mobile-open .mobile-menu nav a:nth-child(5){ animation-delay: .18s }
.mobile-open .mobile-menu nav a:nth-child(6){ animation-delay: .22s }
@keyframes riseIn{ to{ opacity:1; transform: translateY(0) } }
#mobileClose.hamb{ padding:.45rem .6rem }
#mobileClose svg{ display:block }
@media (max-width: 760px){
  .mobile-menu a{ padding:14px 12px }
}