@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

:root{
  --navy:#08306B;
  --blue:#0B4F9C;
  --turquoise:#4FA8E0;
  --red:#B22234;
  --red-dark:#8C1B29;
  --bg:#FFFFFF;
  --surface:#F6FAFC;
  --border:#E4ECF1;
  --ink:#16232E;
  --muted:#64748B;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Assistant',sans-serif;
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
}
.brand{font-family:'Poppins',sans-serif;}
a{color:inherit;}

/* ---------- top bar ---------- */
header.topbar{
  background:#fff; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 40px; position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--border);
}
header.topbar .logo{
  font-family:'Poppins',sans-serif; font-weight:700; font-size:22px; text-decoration:none;
  color:var(--blue);
}
header.topbar nav{display:flex; gap:4px; align-items:center; position:relative;}

.flag-stripe{height:5px; width:100%; background:var(--red);}
header.topbar nav a{
  color:var(--muted); text-decoration:none; font-size:14px;
  padding:8px 14px; border-radius:20px; transition:color .15s, background .15s;
}
header.topbar nav a:hover{color:var(--navy); background:var(--surface);}
header.topbar nav a.active{color:#fff; background:var(--blue); font-weight:600;}

.dropdown{position:relative; display:inline-block;}
.dropdown > span{
  color:var(--muted); font-size:14px; padding:8px 14px; border-radius:20px;
  cursor:pointer; display:inline-block; transition:color .15s, background .15s;
}
.dropdown:hover > span, .dropdown.active > span{color:var(--navy); background:var(--surface); font-weight:600;}
.dropdown-menu{
  display:none; position:absolute; top:100%; right:0; margin-top:6px;
  background:#fff; border:1px solid var(--border); border-radius:12px;
  box-shadow:0 12px 32px rgba(11,42,69,.12);
  min-width:220px; padding:8px; z-index:60;
}
.dropdown-menu::before{
  content:''; position:absolute; top:-6px; right:0; left:0; height:6px;
}
.dropdown:hover .dropdown-menu{display:block;}
.dropdown-menu a{
  display:block; color:var(--ink); padding:9px 12px; border-radius:8px; font-size:13px;
}
.dropdown-menu a:hover{background:var(--surface); color:var(--blue);}
.dropdown-menu a.active{background:var(--surface); font-weight:600; color:var(--blue);}

main.page{max-width:960px; margin:0 auto; padding:44px 40px 90px;}

/* ---------- page hero band (visual continuity with homepage) ---------- */
.page-hero{
  background:var(--blue); color:#fff; padding:50px 40px 40px; text-align:center;
  border-bottom:4px solid var(--turquoise);
}
.page-hero .inner{max-width:960px; margin:0 auto;}
.page-hero .kicker{color:#bcd8f2;}
.page-hero h1.title{color:#fff; margin:0 0 10px;}
.page-hero p.lead{color:rgba(255,255,255,.88); margin:0 auto; max-width:720px;}

.kicker{font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--turquoise); font-weight:700; margin-bottom:8px;}
h1.title{font-family:'Poppins',sans-serif; font-size:36px; color:var(--navy); margin:0 0 6px;}
h2.section{font-family:'Poppins',sans-serif; font-size:24px; color:var(--navy); margin:44px 0 14px;}
h3.sub{font-family:'Poppins',sans-serif; font-size:17px; color:var(--blue); margin:22px 0 10px;}
p.lead{font-size:16px; line-height:1.8; max-width:780px; color:var(--muted);}
p{line-height:1.75;}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:18px 0;}
.card{
  background:#fff; border:1px solid var(--border); border-top:3px solid var(--red); border-radius:14px; padding:20px 22px;
  box-shadow:0 2px 10px rgba(11,42,69,0.04);
}
.card h3{margin:0 0 8px; font-size:16px; color:var(--navy); font-family:'Poppins',sans-serif;}
.card p{margin:0; font-size:14px; line-height:1.6; color:var(--muted);}

.name-hero{
  display:flex; align-items:center; gap:22px; background:var(--surface); border-radius:16px;
  padding:26px 30px; max-width:820px; border:1px solid var(--border); margin:18px 0 22px;
}
.name-hero .k{
  width:64px; height:64px; border-radius:50%; background:var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:'Poppins',sans-serif;
  font-size:28px; font-weight:700; flex-shrink:0; border:3px solid var(--turquoise);
}
.name-hero .word{font-family:'Poppins',sans-serif; font-size:30px; color:var(--navy); font-weight:700;}
.name-hero .word small{display:block; font-size:14px; color:var(--turquoise); font-weight:600; font-family:'Assistant',sans-serif;}

ul.tag-list{list-style:none; margin:0; padding:0; max-width:700px;}
ul.tag-list li{
  background:var(--surface); border-right:4px solid var(--turquoise); padding:12px 18px; margin-bottom:10px;
  border-radius:8px; font-size:15px;
}
ul.tag-list li.rec{border-right-color:var(--blue); background:#fff; box-shadow:0 2px 10px rgba(11,42,69,.05); font-weight:600;}

.swatches{display:flex; gap:14px; flex-wrap:wrap; margin:14px 0;}
.swatch{width:150px;}
.swatch .box{height:70px; border-radius:10px; margin-bottom:8px; border:1px solid var(--border);}
.swatch .name{font-size:13px; font-weight:600;}
.swatch .code{font-size:12px; color:var(--muted); font-family:monospace;}

table.doc-index{width:100%; border-collapse:collapse; font-size:14px; margin:14px 0;}
table.doc-index th{
  text-align:right; font-family:'Poppins',sans-serif; font-size:12px; text-transform:uppercase;
  color:var(--turquoise); padding:8px 12px; border-bottom:2px solid var(--turquoise);
}
table.doc-index td{padding:12px; border-bottom:1px solid var(--border); vertical-align:top; line-height:1.6;}
table.doc-index tr:hover td{background:var(--surface);}
.filecode{font-family:monospace; font-size:12px; background:var(--surface); border:1px solid var(--border); padding:2px 6px; border-radius:4px;}

.steps{margin-top:10px;}
.step{margin-bottom:24px;}
.step h4{
  font-family:'Poppins',sans-serif; font-size:15px; color:#fff; background:var(--blue);
  display:inline-block; padding:5px 14px; border-radius:6px; margin:0 0 8px;
}
.step ul{margin:0; padding-right:20px; font-size:14px; line-height:1.85;}
.step li.done{color:var(--muted); text-decoration:line-through;}
.strike{color:var(--muted); text-decoration:line-through;}
.todo-note{color:var(--red-dark); font-weight:600; text-decoration:none;}
.badge-done{
  display:inline-block; background:var(--turquoise); color:#fff; font-size:11px;
  padding:2px 9px; border-radius:20px; margin-left:6px; text-decoration:none; font-weight:600;
}

/* ---------- shop-style announcement bar ---------- */
.announce{
  background:#fff; color:var(--navy); text-align:center; font-size:12px;
  padding:10px 16px; letter-spacing:.6px; text-transform:uppercase; font-weight:600;
  border-bottom:1px solid var(--border);
}
.announce strong{color:var(--red); font-weight:700;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:6px; font-family:'Poppins',sans-serif;
  font-size:14px; font-weight:600; padding:11px 22px; border-radius:30px;
  text-decoration:none; border:none; cursor:pointer; transition:transform .15s, box-shadow .15s;
}
.btn-primary{background:var(--red); color:#fff; box-shadow:0 6px 16px rgba(178,34,52,.30);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(178,34,52,.4);}
.btn-outline{background:#fff; color:var(--navy); border:1.5px solid var(--border);}
.btn-outline:hover{border-color:var(--blue); color:var(--blue);}
.btn-light{background:rgba(255,255,255,.15); color:#fff; border:1.5px solid rgba(255,255,255,.5);}
.btn-light:hover{background:#fff; color:var(--navy);}

/* ---------- home page / hero ---------- */
.hero{
  background:var(--blue); color:#fff; padding:90px 40px 100px; text-align:center; position:relative; overflow:hidden;
  border-bottom:4px solid var(--turquoise);
}
.hero .tag{
  display:inline-block; background:rgba(255,255,255,.16); color:#fff; font-size:12px; font-weight:700;
  padding:6px 16px; border-radius:20px; margin-bottom:18px; letter-spacing:.5px; text-transform:uppercase;
}
.hero h1{font-family:'Poppins',sans-serif; font-size:52px; margin:0 0 10px; font-weight:700; position:relative;}
.hero p{font-size:18px; opacity:.92; margin:0 0 26px; position:relative;}
.hero .actions{display:flex; gap:14px; justify-content:center; position:relative;}

/* ---------- product-style cards (shop look) ---------- */
.doc-cards{
  max-width:1080px; margin:-46px auto 0; padding:0 40px 70px; position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px;
}
.doc-card{
  background:#fff; border-radius:18px; overflow:hidden; text-decoration:none; color:var(--ink);
  box-shadow:0 10px 28px rgba(11,42,69,.10); border:1px solid var(--border);
  transition:transform .15s, box-shadow .15s; display:flex; flex-direction:column;
}
.doc-card:hover{transform:translateY(-5px); box-shadow:0 16px 36px rgba(11,42,69,.16);}
.doc-card .thumb{
  height:110px; display:flex; align-items:center; justify-content:center; position:relative;
  background:var(--blue);
  font-family:'Poppins',sans-serif; font-size:30px; font-weight:700; color:#fff;
}
.doc-card .thumb svg{width:32px; height:32px; stroke:#fff; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.doc-card .thumb .badge{
  position:absolute; top:10px; left:10px; background:var(--red); color:#fff; font-size:10px;
  font-weight:700; padding:3px 10px; border-radius:20px; letter-spacing:.3px;
}
.doc-card .body{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1;}
.doc-card h3{font-family:'Poppins',sans-serif; color:var(--navy); margin:0 0 8px; font-size:18px;}
.doc-card p{font-size:13px; color:var(--muted); margin:0 0 16px; line-height:1.6; flex:1;}
.doc-card .cta{
  font-family:'Poppins',sans-serif; font-size:13px; font-weight:700; color:var(--red);
  display:flex; align-items:center; gap:5px;
}

footer.site{text-align:center; padding:30px; font-size:12px; color:var(--muted); border-top:1px solid var(--border); margin-top:40px;}