:root{
  --bii-blue:#2e4171;
  --bii-red:#b0192d;
  --bii-bg:#f6f8fb;
  --bii-card:#ffffff;
  --bii-text:#0f172a;
  --bii-muted:#64748b;
  --bii-border:#e2e8f0;
  --bii-shadow: 0 10px 25px rgba(2,6,23,.06), 0 4px 10px rgba(2,6,23,.04);
  --bii-radius: 18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--bii-text);
  background:var(--bii-bg);
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:1180px;margin:0 auto;padding:0 20px}
.section{padding:42px 0}
.card{
  background:var(--bii-card);
  border:1px solid var(--bii-border);
  border-radius:var(--bii-radius);
  box-shadow:var(--bii-shadow);
}
.card-pad{padding:24px}
.muted{color:var(--bii-muted)}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  font-size:12px;border:1px solid var(--bii-border);
  background:#fff;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 16px;border-radius:14px;
  border:1px solid var(--bii-border);
  background:#fff; cursor:pointer;
  font-weight:600;
  transition:transform .06s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn:hover{border-color:#cbd5e1}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:linear-gradient(135deg,var(--bii-blue),#1f3a6a);
  color:#fff;border-color:transparent;
}
.btn-danger{
  background:linear-gradient(135deg,var(--bii-red),#8d1322);
  color:#fff;border-color:transparent;
}
.btn-ghost{
  background:transparent;
}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.input, .textarea, .select{
  width:100%;
  border:1px solid var(--bii-border);
  background:#fff;
  border-radius:14px;
  padding:12px 14px;
  outline:none;
}
.textarea{min-height:110px;resize:vertical}
label{font-size:13px;color:var(--bii-muted);display:block;margin-bottom:6px}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width: 980px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 820px){
  .grid-3,.grid-2{grid-template-columns:1fr}
}
.topbar{
  background:#fff;border-bottom:1px solid var(--bii-border);
  position:sticky; top:0; z-index:50;
}
.topbar-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;
}
.brand{
  display:flex;align-items:center;gap:12px;
}
.brand img{width:42px;height:42px;object-fit:contain}
.brand .name{font-weight:800;letter-spacing:.2px}
.nav{
  display:flex;align-items:center;gap:14px;
}
.nav a{
  padding:10px 12px;border-radius:12px;
  color:var(--bii-muted);font-weight:700;font-size:14px;
}
.nav a:hover{background:#f1f5f9;color:var(--bii-text)}
.mobile-toggle{display:none}
.mobile-nav{display:none}
.mobile-nav.is-open{display:block}
@media (max-width: 820px){
  .nav{display:none}
  .mobile-toggle{display:inline-flex}
  .mobile-nav{
    display:none;
    padding:12px 0 16px 0;
  }
  .mobile-nav a{
    display:block;
    padding:12px 12px;
    border-radius:12px;
    color:var(--bii-muted);font-weight:800;
  }
  .mobile-nav a:hover{background:#f1f5f9;color:var(--bii-text)}
  .mobile-nav.is-open{display:block}
}

.hero{
  padding:34px 0 8px 0;
}
.hero-card{
  display:grid;gap:20px;
  grid-template-columns: 1.1fr .9fr;
  align-items:center;
}
.hero-card-single{grid-template-columns:1fr;}
@media (max-width: 980px){
  .hero-card{grid-template-columns:1fr}
}
.hero h1{margin:0;font-size:38px;line-height:1.12}
.hero p{margin:12px 0 0 0;color:var(--bii-muted);font-size:16px}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.kpi{
  display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));
}
.kpi .kpi-item{
  padding:14px;border-radius:16px;background:#f8fafc;border:1px solid #eef2f7;
}
.kpi .kpi-item .t{font-weight:900;font-size:14px}
.kpi .kpi-item .s{color:var(--bii-muted);font-size:13px;margin-top:2px}
@media (max-width: 480px){
  .kpi{grid-template-columns:1fr}
}

.gallery-grid img{
  border-radius:16px;border:1px solid var(--bii-border);
  box-shadow: 0 8px 18px rgba(2,6,23,.06);
  height:220px;object-fit:cover;width:100%;
}
@media (max-width: 820px){
  .gallery-grid img{height:190px}
}
.slider{
  position:relative;
}
.slider-track{
  display:flex;gap:14px;overflow:auto;scroll-snap-type:x mandatory;
  padding:2px 2px 12px 2px;
}
.slider-track::-webkit-scrollbar{height:10px}
.slider-track::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:999px}
.slide{
  min-width: 380px;
  scroll-snap-align:start;
}
@media (max-width: 820px){
  .slide{min-width: 78vw}
}
.slide img{
  border-radius:16px;border:1px solid var(--bii-border);
  height:260px;object-fit:cover;width:100%;
}
.slider-actions{
  display:flex;gap:10px;position:absolute;right:12px;top:12px;
}
.slider-actions .btn{padding:10px 12px;border-radius:12px}

.form-row{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width: 820px){ .form-row{grid-template-columns:1fr} }
.form-status{
  margin-top:12px;
  padding:10px 12px;border-radius:14px;border:1px solid var(--bii-border);
  background:#fff; display:none;
}
.form-status.is-show{display:block}
.form-status.ok{border-color:#86efac;background:#f0fdf4}
.form-status.err{border-color:#fecaca;background:#fef2f2}

.footer{
  padding:34px 0 28px 0;
  border-top:1px solid var(--bii-border);
  background:#fff;
}
.footer-grid{
  display:grid;gap:18px;
  grid-template-columns: 1.3fr .7fr .7fr;
}
@media (max-width: 820px){
  .footer-grid{grid-template-columns:1fr}
}
.footer h4{margin:0 0 10px 0}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.footer li a{color:var(--bii-muted);font-weight:700}
.footer li a:hover{color:var(--bii-text)}
.footer .bottom{
  margin-top:18px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  color:var(--bii-muted);font-size:13px;
}

.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:60;
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:999px;
  background: #25D366; color:#fff; font-weight:900;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
}
.wa-float:hover{filter:brightness(.98)}
.wa-dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.9)}
.table{
  width:100%; border-collapse:separate; border-spacing:0;
  overflow:hidden;
}
.table th, .table td{
  text-align:left; padding:12px 12px; border-bottom:1px solid var(--bii-border);
  font-size:14px;
}
.table th{color:var(--bii-muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.table tr:hover td{background:#f8fafc}
.table .actions{display:flex;gap:8px;flex-wrap:wrap}
.pill{
  display:inline-flex;align-items:center;
  padding:6px 10px;border-radius:999px;font-weight:800;font-size:12px;
  border:1px solid var(--bii-border);background:#fff;color:var(--bii-muted)
}
.notice{
  padding:12px 14px;border-radius:16px;border:1px solid var(--bii-border);
  background:#fff;
}
.notice strong{display:block;margin-bottom:4px}


/* BII v1.1 - more colorful, clean, trust-focused */

/* Soft gradient background + subtle pattern */
body{
  background:
    radial-gradient(900px 520px at 12% 6%, rgba(46,65,113,.16), transparent 60%),
    radial-gradient(820px 520px at 92% 10%, rgba(176,25,45,.12), transparent 55%),
    linear-gradient(180deg, #f7f9fc 0%, #f6f8fb 40%, #f7fafc 100%);
}
.section{position:relative}
.section:before{
  content:"";
  position:absolute; inset:-1px 0 auto 0;
  height:1px; opacity:.22;
  background:linear-gradient(90deg, transparent, rgba(46,65,113,.35), rgba(176,25,45,.28), transparent);
}
.topbar{
  background:rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
}
.brand .name{
  background:linear-gradient(90deg, var(--bii-blue), var(--bii-red));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.badge{
  border-color: rgba(46,65,113,.18);
  background: linear-gradient(135deg, rgba(46,65,113,.10), rgba(176,25,45,.06));
  color: #0b1220;
  font-weight:800;
}
.card{
  border-color: rgba(226,232,240,.9);
  box-shadow: 0 18px 40px rgba(2,6,23,.06), 0 6px 14px rgba(2,6,23,.04);
}
.card:hover{
  box-shadow: 0 22px 46px rgba(2,6,23,.07), 0 8px 18px rgba(2,6,23,.05);
}
.btn{
  box-shadow: 0 10px 18px rgba(2,6,23,.06);
}
.btn:hover{
  box-shadow: 0 14px 22px rgba(2,6,23,.08);
}
.btn-primary{
  background: linear-gradient(135deg, #2e4171, #2f74ff);
}
.btn-danger{
  background: linear-gradient(135deg, #b0192d, #ff3b30);
}
.pill{
  border-color: rgba(46,65,113,.18);
  background: linear-gradient(135deg, rgba(46,65,113,.06), rgba(176,25,45,.04));
}
.hero{
  position:relative;
}
.hero:before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(700px 360px at 20% 10%, rgba(47,116,255,.16), transparent 55%),
    radial-gradient(640px 340px at 80% 0%, rgba(255,59,48,.12), transparent 55%);
  pointer-events:none;
}
.hero-card{
  position:relative;
  overflow:hidden;
}
.hero-card:after{
  content:"";
  position:absolute; right:-140px; top:-120px;
  width:340px; height:340px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(47,116,255,.28), rgba(176,25,45,.18), transparent 70%);
  filter: blur(2px);
  opacity:.55;
}
.gallery-grid img, .slide img{
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.gallery-grid img:hover, .slide img:hover{
  transform: translateY(-2px);
  filter: saturate(1.05);
  box-shadow: 0 16px 28px rgba(2,6,23,.10);
}
.footer{
  background:
    radial-gradient(700px 220px at 10% 0%, rgba(46,65,113,.10), transparent 62%),
    radial-gradient(700px 220px at 90% 0%, rgba(176,25,45,.08), transparent 62%),
    #ffffff;
}
.wa-float{
  background: linear-gradient(135deg, #25D366, #11b981);
}