/* MBO128 — shared stylesheet for content pages. Blue/gold theme, responsive. */
:root{
  --navy:#071530; --navy2:#0a1f45; --panel:#0e2a5e; --panel2:#122e63;
  --blue:#307fe2; --blued:#08399b; --cyan:#6ec6ff; --cyanb:#00c3ff;
  --gold:#e09600; --goldl:#ffc83d; --goldd:#c97c00;
  --ink:#0a1a3f; --mute:#9fb4d8; --line:#24457f; --white:#fff;
  --radius:16px; --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  color:#e8eefb; background:
    radial-gradient(1100px 500px at 12% -5%, rgba(0,195,255,.10), transparent 60%),
    radial-gradient(1000px 600px at 100% 0%, rgba(224,150,0,.10), transparent 55%),
    linear-gradient(180deg,#0a1f45 0%, #071530 40%, #040d21 100%);
  background-attachment:fixed; line-height:1.7; min-height:100vh;
}
a{color:var(--cyan); text-decoration:none}
a:hover{color:var(--goldl)}
img{max-width:100%; display:block}

/* ---- Header ---- */
.hdr{position:sticky; top:0; z-index:40; backdrop-filter:blur(10px);
  background:rgba(7,21,48,.82); border-bottom:1px solid rgba(36,69,127,.6)}
.hdr-in{max-width:var(--maxw); margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; gap:18px}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; font-size:20px; color:#fff}
.brand img{height:34px; width:auto}
.brand b{color:var(--goldl)}
.nav{margin-left:auto; display:flex; gap:22px; align-items:center; flex-wrap:wrap}
.nav a{color:#c7d6f2; font-weight:600; font-size:15px}
.nav a:hover{color:var(--goldl)}
.btn{display:inline-block; background:linear-gradient(135deg,var(--goldl),var(--goldd));
  color:var(--ink); font-weight:800; padding:10px 20px; border-radius:999px; font-size:15px}
.btn:hover{filter:brightness(1.07); color:var(--ink)}
.btn-ghost{background:transparent; border:2px solid var(--line); color:#fff}
.btn-ghost:hover{border-color:var(--gold); color:var(--goldl)}

/* ---- Hero / breadcrumb ---- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 16px}
.crumb{font-size:14px; color:var(--mute); padding:20px 0 0}
.crumb a{color:var(--mute)} .crumb a:hover{color:var(--goldl)}
.hero{padding:30px 0 10px}
.hero h1{font-size:clamp(28px,5vw,44px); line-height:1.15; margin:.2em 0 .25em; color:#fff; font-weight:900}
.hero .lede{font-size:18px; color:#c7d6f2; max-width:760px}
.tagpill{display:inline-block; background:rgba(14,42,94,.8); border:1px solid var(--line);
  color:var(--cyan); font-weight:700; font-size:13px; padding:5px 14px; border-radius:999px; margin-bottom:6px}

/* ---- Content ---- */
main{padding:10px 0 60px}
.card{background:linear-gradient(180deg,var(--panel2),#0c2250);
  border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px; margin:18px 0}
.card h2{font-size:24px; color:#fff; margin:.1em 0 .5em; font-weight:800}
.card h3{font-size:19px; color:var(--goldl); margin:1.1em 0 .4em}
.card p{color:#d6e0f5; margin:.5em 0}
.card ul,.card ol{color:#d6e0f5; padding-left:22px; margin:.5em 0}
.card li{margin:.35em 0}
.lead-accent{border-left:4px solid var(--gold); padding-left:16px}

.grid{display:grid; gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.tile{background:linear-gradient(180deg,#1b3f82,#122e63); border:1px solid var(--line);
  border-radius:14px; padding:22px}
.tile .ic{width:48px; height:48px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; font-size:22px; font-weight:900; color:var(--ink);
  background:linear-gradient(135deg,var(--goldl),var(--goldd)); margin-bottom:12px}
.tile.cyan .ic{background:linear-gradient(135deg,var(--cyanb),var(--blue))}
.tile h3{color:#fff; font-size:18px; margin:.2em 0 .3em}
.tile p{color:var(--mute); font-size:15px; margin:0}

.step{display:flex; gap:16px; margin:16px 0; align-items:flex-start}
.step .n{flex:0 0 auto; width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg,var(--goldl),var(--goldd)); color:var(--ink);
  font-weight:900; display:flex; align-items:center; justify-content:center; font-size:18px}
.step h3{margin:.15em 0 .2em; color:#fff; font-size:18px}
.step p{margin:0; color:var(--mute)}

.faq-q{background:linear-gradient(180deg,#1b3f82,#122e63); border:1px solid var(--line);
  border-radius:12px; padding:0; margin:12px 0; overflow:hidden}
.faq-q summary{cursor:pointer; padding:16px 20px; font-weight:700; color:#fff; font-size:17px;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary::after{content:"+"; color:var(--goldl); font-size:24px; font-weight:800}
.faq-q[open] summary::after{content:"\2013"}
.faq-q .a{padding:0 20px 18px; color:var(--mute)}

table.tbl{width:100%; border-collapse:collapse; margin:10px 0; font-size:15px}
table.tbl th,table.tbl td{text-align:left; padding:12px 14px; border-bottom:1px solid rgba(36,69,127,.6)}
table.tbl th{color:var(--goldl); font-weight:800; background:rgba(8,57,155,.25)}
table.tbl td{color:#d6e0f5}
table.tbl tr:last-child td{border-bottom:none}

.form-row{display:grid; gap:6px; margin:14px 0}
.form-row label{color:#c7d6f2; font-weight:600; font-size:15px}
.form-row input,.form-row textarea,.form-row select{
  background:#0b2048; border:1px solid var(--line); border-radius:10px; padding:12px 14px;
  color:#fff; font-size:15px; font-family:inherit}
.form-row input:focus,.form-row textarea:focus{outline:none; border-color:var(--gold)}
.note{background:rgba(224,150,0,.1); border:1px solid rgba(224,150,0,.45);
  border-radius:12px; padding:14px 18px; color:#ffe6b0; margin:16px 0; font-size:15px}
.note.warn{background:rgba(138,43,43,.18); border-color:rgba(255,120,120,.5); color:#ffc9c9}
.note.ok{background:rgba(31,138,76,.16); border-color:rgba(80,210,122,.5); color:#bff2d2}

.blog-card{background:linear-gradient(180deg,#122e63,#0c2250); border:1px solid var(--line);
  border-radius:14px; overflow:hidden}
.blog-card .thumb{aspect-ratio:16/9; background:#0b1b3d; object-fit:cover; width:100%}
.blog-card .body{padding:16px 18px}
.blog-card .tag{font-size:12px; color:var(--cyan); font-weight:700; text-transform:uppercase; letter-spacing:.5px}
.blog-card h3{margin:.3em 0 .3em; color:#fff; font-size:17px}
.blog-card p{color:var(--mute); font-size:14px; margin:0}

.quote{background:linear-gradient(180deg,#1b3f82,#122e63); border:1px solid var(--line);
  border-radius:14px; padding:20px}
.quote p{color:#e8eefb; font-style:italic; margin:0 0 12px}
.quote .who{display:flex; align-items:center; gap:10px}
.quote .av{width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--goldl),var(--goldd));
  color:var(--ink); font-weight:900; display:flex; align-items:center; justify-content:center}
.quote .who b{color:#fff; display:block; font-size:15px} .quote .who span{color:var(--mute); font-size:13px}
.stars{color:var(--goldl); font-size:15px; letter-spacing:2px}

.cta{background:linear-gradient(135deg,rgba(8,57,155,.6),rgba(14,42,94,.6));
  border:1px solid var(--line); border-radius:20px; padding:32px; text-align:center; margin:30px 0}
.cta h2{color:#fff; font-size:26px; margin:0 0 8px}
.cta p{color:#c7d6f2; margin:0 0 18px}

/* ---- Footer ---- */
.ftr{background:#040d21; border-top:1px solid rgba(36,69,127,.6); padding:44px 0 26px; margin-top:20px}
.ftr-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px}
.ftr h4{color:#fff; font-size:15px; margin:0 0 12px; text-transform:uppercase; letter-spacing:.5px}
.ftr a{color:var(--mute); font-size:14px; display:block; padding:5px 0}
.ftr a:hover{color:var(--goldl)}
.ftr .about p{color:var(--mute); font-size:14px; margin:12px 0}
.ftr .soc{display:flex; gap:10px; margin-top:12px}
.ftr .soc a{width:34px; height:34px; border-radius:8px; background:#122e63; display:flex;
  align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:700; padding:0}
.ftr .soc a:hover{background:var(--gold); color:var(--ink)}
.ftr-bottom{max-width:var(--maxw); margin:26px auto 0; padding:18px 16px 0; border-top:1px solid rgba(36,69,127,.5);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--mute); font-size:13px}
.disclaimer{max-width:var(--maxw); margin:16px auto 0; padding:0 16px; color:#64789f; font-size:12.5px; line-height:1.6}

@media(max-width:860px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .nav{display:none}
  .nav.show{display:flex}
}
@media(max-width:520px){ .ftr-grid{grid-template-columns:1fr} .card{padding:20px} }