/* ── NATTEST NEW HOME STYLES ── */
:root{
  --red:#C9002B; --red-dark:#8B0020; --red-soft:#fff0f2;
  --navy:#0D1B2A; --navy-mid:#1A2D3F;
  --gold:#E8C84A; --gold-light:#F5E49A;
  --white:#fff; --off:#F7F4EF;
  --g100:#EDE9E2; --g200:#DDD8D0; --g400:#9A8A7A; --g600:#5A4A3A;
  --green:#16A34A;
  --font:'Sora',sans-serif; --jp:'Noto Serif JP',serif;
  --radius:12px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08);
  --shadow-md:0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:0 12px 40px rgba(0,0,0,.13);
  --t:all .22s ease;
}

/* ── HERO DYNAMIC ── */
.hero-mode-pills{display:flex;gap:10px;margin-bottom:28px;flex-wrap:wrap;}
.mode-pill{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:100px;font-size:12px;font-weight:600;letter-spacing:.04em;border:1px solid; transition: var(--t); }
.mode-pill-cbt{background:rgba(21,101,192,.15);border-color:rgba(21,101,192,.4);color:#64b5f6;}
.mode-pill-pbt{background:rgba(123,45,139,.15);border-color:rgba(123,45,139,.4);color:#ce93d8;}
.mode-pill:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.mode-pill-dot{width:5px;height:5px;border-radius:50%;}
.mode-pill-cbt .mode-pill-dot{background:#64b5f6;}
.mode-pill-pbt .mode-pill-dot{background:#ce93d8;}

/* ── EXAM MODES SECTION ── */
.modes-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:0;}
.mode-card{border-radius:16px;padding:32px;border:2px solid transparent;transition:var(--t);position:relative;overflow:hidden;}
.mode-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent;}
.mode-card-cbt{background:linear-gradient(135deg,#eff6ff,#e0eaff);border-color:#bfdbfe;}
.mode-card-pbt{background:linear-gradient(135deg,#faf0ff,#f3e5f5);border-color:#e0c2ff;}
.mode-card-icon{font-size:64px;margin-bottom:22px;}
.mode-card-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px;}
.mode-card-cbt .mode-card-label{color:#1565c0;}
.mode-card-pbt .mode-card-label{color:#7b2d8b;}
.mode-card-title{font-size:24px;font-weight:800;color:#000;margin-bottom:12px;letter-spacing:-.01em;}
.mode-card-desc{font-size:15px;color:#111;line-height:1.65;margin-bottom:24px;font-weight:500;}
.mode-card-facts{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;}
.mode-fact{display:flex;justify-content:space-between;font-size:15px;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.08);}
.mode-fact:last-child{border:none;}
.mode-fact .label{color:#111;font-weight:500;}
.mode-fact .value{font-weight:700;color:#000;}
.mode-card-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:800;transition:var(--t);}
.mode-card-cbt .mode-card-link{color:#1565c0;}
.mode-card-pbt .mode-card-link{color:#7b2d8b;}
.mode-card-link:hover{gap:10px;}

@media(max-width:900px){
  .modes-grid{grid-template-columns:1fr;}
}

/* ── REFINEMENTS ── */
.hero-stats-grid { gap: 14px; }
.hero-stat-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.hero-stat-card:hover { background: rgba(255,255,255,0.08); }
.step-card { border: 1px solid var(--g200); box-shadow: none; }
.step-card:hover { border-color: transparent; box-shadow: var(--shadow-lg); }
/* ── LEVEL CARDS ── */
.levels-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.level-card{border-radius:16px;padding:24px 18px;border:2px solid transparent;transition:var(--t);display:flex;flex-direction:column;background:#fff;}
.level-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent;}
.lvl-red{background:#fff0f2;border-color:#ffd0d8;}
.lvl-orange{background:#fff5e8;border-color:#ffddb8;}
.lvl-blue{background:#eff6ff;border-color:#bfdbfe;}
.lvl-green{background:#f0fff4;border-color:#b7f5c8;}
.lvl-purple{background:#faf0ff;border-color:#e0c2ff;}
.lc-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px;}
.lc-code{font-size:26px;font-weight:800;font-family:var(--font);}
.lvl-red .lc-code{color:var(--red);}
.lvl-orange .lc-code{color:#c06000;}
.lvl-blue .lc-code{color:#1d4ed8;}
.lvl-green .lc-code{color:#15803d;}
.lvl-purple .lc-code{color:#7c3aed;}
.lc-badges{display:flex;flex-direction:column;gap:4px;align-items:flex-end;}
.lc-badge{font-size:11px;font-weight:800;background:rgba(0,0,0,.1);padding:4px 8px;border-radius:4px;color:#000;letter-spacing:.05em;}
.lc-name{font-size:14px;font-weight:800;color:#000;margin-bottom:12px;text-transform:uppercase;letter-spacing:.06em;}
.lc-desc{font-size:15px;color:#111;line-height:1.6;margin-bottom:20px;flex:1;font-weight:500;}
.lc-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;}
.lc-fee{font-size:16px;font-weight:800;color:#000;}
.lc-btn{font-size:12px;font-weight:800;color:var(--red);border:2px solid var(--red);padding:6px 14px;border-radius:6px;transition:var(--t);text-decoration:none;display:inline-block;}
.lc-btn:hover{background:var(--red);color:#fff;}
.levels-note{margin-top:20px;font-size:15px;color:#000;display:flex;align-items:center;gap:12px;font-weight:500;}
.levels-note-badge{background:rgba(201,0,43,.1);color:var(--red);font-size:13px;font-weight:800;padding:5px 14px;border-radius:6px;white-space:nowrap;}

@media(max-width:900px){
  .levels-grid{grid-template-columns:1fr;}
}

/* ── REFINEMENTS ── */

/* ── HERO BANNER 2 BACKGROUND (EXACT COPY FROM HTML) ── */
.hero-section {
  width: 100%;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.b2-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    #060D1A 0%,
    #0A1628 40%,
    #0D1F40 70%,
    #060D1A 100%
  );
}

/* Japan flag circle — abstract */
.b2-flag-circle {
  position: absolute;
  right: 120px;
  top: 50%;
  transform: translateY(-50%);
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(200,16,46,0.15) 0%,
    rgba(200,16,46,0.08) 40%,
    transparent 70%
  );
  border: 2px solid rgba(200,16,46,0.2);
  box-shadow: 0 0 80px rgba(200,16,46,0.1), 0 0 0 20px rgba(200,16,46,0.04), 0 0 0 40px rgba(200,16,46,0.02);
}

/* Inner circle */
.b2-flag-inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,16,46,0.5) 0%, rgba(200,16,46,0.2) 60%, transparent 100%);
  border: 1px solid rgba(200,16,46,0.4);
}

/* SVG Circuit lines */
.b2-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0.15;
}

/* Diagonal light slash */
.b2-slash {
  position: absolute;
  top: -100px;
  left: 45%;
  width: 3px;
  height: 150%;
  background: linear-gradient(180deg, transparent, rgba(212,160,23,0.4), transparent);
  transform: rotate(-20deg);
}
.b2-slash2 {
  position: absolute;
  top: -100px;
  left: 48%;
  width: 1px;
  height: 150%;
  background: linear-gradient(180deg, transparent, rgba(200,16,46,0.3), transparent);
  transform: rotate(-20deg);
}

/* Noise overlay */
.b2-noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.4;
}

/* BD+JP flag corner accent */
.b2-flag-corner {
  position: absolute;
  top: 100px;
  right: 32px;
  display: flex;
  gap: 6px;
  align-items: center;
  z-index: 10;
}
.flag-pill {
  padding: 4px 12px;
  border-radius: 4px;
  font-family: 'Teko', sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 600;
}