:root{
  --bg:#ffffff;
  --bg-soft:#f7f9fd;
  --text:#0f172a;
  --muted:rgba(15,23,42,.72);
  --line:rgba(15,23,42,.10);
  --brand:#0b5bd3;
  --brand2:#0a3b8a;
  --radius:18px;
  --shadow:0 20px 60px rgba(2,6,23,.10);

  /* EASY ADJUSTMENTS */
  --logo-header-h:96px;   /* header logo size */
  --logo-footer-h:44px;   /* footer logo size */
  --nav-right:18px;       /* increase = push nav left */
  --bg-art-opacity:.10;   /* background image strength */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
a{color:var(--brand2);text-decoration:none}
a:hover{text-decoration:underline}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(900px 500px at 10% -5%, rgba(11,91,211,.10), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(10,59,138,.10), transparent 55%),
    linear-gradient(180deg, rgba(247,249,253,1), rgba(255,255,255,1));
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:var(--bg-art-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'%3E%3Cg fill='none' stroke='%230f172a' stroke-opacity='0.45'%3E%3Cpath d='M120 720 L210 320 L300 720' stroke-width='14'/%3E%3Cpath d='M210 320 L210 170' stroke-width='10'/%3E%3Cpath d='M210 170 C160 180 130 210 120 250' stroke-width='10'/%3E%3Cpath d='M210 170 C260 180 290 210 300 250' stroke-width='10'/%3E%3Cpath d='M700 650 C820 520 1000 520 1120 650' stroke-width='18'/%3E%3Ccircle cx='905' cy='320' r='92' stroke-width='10'/%3E%3Ccircle cx='905' cy='320' r='60' stroke-width='8'/%3E%3Ccircle cx='905' cy='320' r='28' stroke-width='6'/%3E%3Cpath d='M905 120 L905 420' stroke-width='10'/%3E%3Cpath d='M830 320 L980 320' stroke-width='10'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:1200px 800px;
  background-position:85% 65%;
}

.container{width:min(1120px, calc(100% - 32px));margin:0 auto}

.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px}
.brand{display:flex;align-items:center;gap:14px;min-width:220px}
.brand img{height:var(--logo-header-h);width:auto;display:block}
.brand .tag{display:flex;flex-direction:column;gap:2px}
.brand .tag strong{font-size:18px;letter-spacing:.2px}
.brand .tag span{color:var(--muted);font-size:13px}

.nav{display:flex;align-items:center;gap:12px;margin-left:auto;position:relative;right:var(--nav-right)}
.nav a{padding:10px 12px;border-radius:12px;color:rgba(15,23,42,.86);font-weight:700;font-size:14px}
.nav a:hover{background:rgba(11,91,211,.08);text-decoration:none}
.nav a.active{background:rgba(11,91,211,.12);color:var(--brand2)}

.menu-btn{
  display:none;border:1px solid var(--line);
  background:rgba(255,255,255,.88);
  border-radius:14px;padding:10px 12px;font-weight:800;
}

.hero{padding:42px 0 10px}
.hero-card{
  border:1px solid var(--line);
  border-radius:calc(var(--radius) + 6px);
  box-shadow:var(--shadow);
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76));
  overflow:hidden;
}
.hero-top{padding:28px 26px 8px}
.kicker{color:var(--brand2);font-weight:900;letter-spacing:.14em;font-size:12px;text-transform:uppercase}
.hero h1{margin:10px 0 8px;font-size:clamp(28px, 3.4vw, 44px);line-height:1.15}
.hero p{margin:0 0 16px;color:var(--muted);font-size:16px;max-width:72ch}
.pills{display:flex;flex-wrap:wrap;gap:10px;padding:0 26px 22px}
.pill{border:1px solid var(--line);background:rgba(255,255,255,.85);border-radius:999px;padding:8px 12px;font-weight:800;font-size:13px;color:rgba(15,23,42,.86)}

.section{padding:26px 0}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.82);box-shadow:0 16px 40px rgba(2,6,23,.06);overflow:hidden}
.card .pad{padding:18px}
.card h2{margin:0 0 8px;font-size:18px}
.card p,.card li{color:var(--muted);margin:0 0 10px}
.card ul{margin:10px 0 0 18px}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{display:block;font-weight:800;font-size:13px;margin-bottom:6px}
input,textarea{
  width:100%;border:1px solid var(--line);
  border-radius:14px;padding:11px 12px;
  font:inherit;background:rgba(255,255,255,.92)
}
textarea{min-height:120px;resize:vertical}
.help{font-size:12px;color:var(--muted);margin-top:6px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid rgba(11,91,211,.24);
  background:rgba(11,91,211,.10);
  color:var(--brand2);font-weight:900;
  border-radius:14px;padding:11px 14px;cursor:pointer;
}
.btn:hover{background:rgba(11,91,211,.14)}
.btn.primary{
  background:linear-gradient(180deg, rgba(11,91,211,.18), rgba(11,91,211,.10));
  border-color:rgba(11,91,211,.30);
}

.notice{border:1px solid var(--line);background:rgba(247,249,253,.8);border-radius:14px;padding:12px;color:rgba(15,23,42,.80)}

.footer{
  border-top:1px solid var(--line);
  margin-top:30px;padding:22px 0;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px);
}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:18px}
.footer .mini{display:flex;align-items:center;gap:12px}
.footer .mini img{height:var(--logo-footer-h);width:auto}
.footer small{color:var(--muted)}
.footer a{color:rgba(15,23,42,.75);font-weight:800}

@media (max-width:880px){
  .brand .tag{display:none}
  .nav{display:none;position:fixed;top:76px;right:16px;left:16px;flex-direction:column;padding:10px;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
  .nav.open{display:flex}
  .nav a{width:100%}
  .menu-btn{display:inline-flex}
  .header-inner{padding:12px 0}
  .form-row{grid-template-columns:1fr}
}

/* Legacy / imported content (UVHFS conversion helpers) */
.legacy-wrap{ background:#fff; border:1px solid rgba(15,23,42,.10); border-radius:18px; overflow:hidden; }
.legacy-pad{ padding:18px; }
.legacy-note{ font-size:14px; color: rgba(15,23,42,.72); }
.legacy-hr{ height:1px; background: rgba(15,23,42,.10); border:0; margin:16px 0; }
.legacy-table-wrap{ width:100%; overflow:auto; border-radius:14px; border:1px solid rgba(15,23,42,.10); }
table.legacy-table{ border-collapse: collapse; width:100%; min-width: 900px; }
table.legacy-table th, table.legacy-table td{ text-align:left; padding:10px 12px; border-bottom:1px solid rgba(15,23,42,.10); vertical-align:top; }
table.legacy-table thead th{ position: sticky; top: 0; background:#fff; z-index: 1; }
table.legacy-table tbody tr:hover{ background: rgba(0,80,151,.06); }
code.inline{ background: rgba(15,23,42,.06); padding:2px 6px; border-radius:8px; }
