:root {
/* Brand Colors */
--hbj-navy-dark: #0a101f;
--hbj-navy-base: #131b2e;
--hbj-navy-light: #1c263f;
--hbj-blue-primary: #2b6bf5;
--hbj-blue-hover: #1a55d6;
--hbj-blue-glow: rgba(43, 107, 245, 0.4);

/* Status Colors */
--hbj-up: #03c087;
--hbj-down: #f6465d;

/* Text Colors */
--hbj-text-white: #ffffff;
--hbj-text-gray: #848e9c;
--hbj-text-dark: #1e2329;

/* Layout */
--hbj-max-width: 1240px;
--hbj-radius: 12px;
--hbj-radius-sm: 8px;

/* Effects */
--hbj-shadow-card: 0 10px 40px -10px rgba(0,0,0,0.1);
--hbj-shadow-float: 0 20px 60px -10px rgba(0,0,0,0.3);
--hbj-glass: rgba(255, 255, 255, 0.05);
--hbj-glass-border: rgba(255, 255, 255, 0.1);
}

html { scroll-behavior: smooth; }

body {
margin: 0;
padding: 0;
font-family: 'Roboto', 'Noto Sans JP', sans-serif;
background-color: #f7f9fc;
color: var(--hbj-text-dark);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}

*, *::before, *::after { box-sizing: border-box; }

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; padding: 0; margin: 0; }
button { font-family: inherit; }

/* Utilities */
.hbj-container {
max-width: var(--hbj-max-width);
margin: 0 auto;
padding: 0 24px;
position: relative;
z-index: 2;
}

.hbj-fade-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.hbj-fade-up.visible {
opacity: 1;
transform: translateY(0);
}

/* * =========================================
 * Header
 * =========================================
 */
.hbj-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 70px;
background: rgba(10, 16, 31, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
z-index: 1000;
border-bottom: 1px solid rgba(255,255,255,0.05);
transition: all 0.3s ease;
}

.hbj-header__logo {
font-size: 26px;
font-weight: 700;
max-width:250px;
color: #fff;
letter-spacing: -0.5px;
display: flex;
align-items: center;
gap: 8px;
}
.hbj-nav-desktop {
display: flex;
gap: 32px;
margin-left: 60px;
margin-right: auto;
}

.hbj-nav-link {
color: #b7bdc6;
font-size: 14px;
font-weight: 500;
position: relative;
padding: 24px 0;
}
.hbj-nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--hbj-blue-primary);
transition: width 0.3s;
}
.hbj-nav-link:hover { color: #fff; }
.hbj-nav-link:hover::after { width: 100%; }

.hbj-auth-btns {
display: flex;
gap: 12px;
align-items: center;
}

.hbj-btn {
padding: 0 24px;
height: 40px;
border-radius: 4px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
border: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}

.hbj-btn-text {
background: transparent;
color: #fff;
}
.hbj-btn-text:hover { color: var(--hbj-blue-primary); }

.hbj-btn-primary {
background: var(--hbj-blue-primary);
color: #fff;
box-shadow: 0 4px 12px rgba(43, 107, 245, 0.3);
}
.hbj-btn-primary:hover {
background: var(--hbj-blue-hover);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(43, 107, 245, 0.4);
}

.hbj-menu-trigger {
display: none;
color: #fff;
font-size: 24px;
background: none;
border: none;
cursor: pointer;
}

/* * =========================================
 * Hero Area (Updated Design)
 * =========================================
 */
.hbj-hero {
position: relative;
min-height: 600px;
background: #ffffff;
display: flex;
align-items: center;
padding-top: 100px;
padding-bottom: 60px;
overflow: hidden;
}

/* Abstract Background Design */
.hbj-hero-bg {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
z-index: 1;
pointer-events: none;
}

.hbj-hero-shape {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.6;
}

.hbj-hero-shape-1 {
top: -100px; right: -100px; width: 600px; height: 600px;
background: radial-gradient(circle, #e6f0ff 0%, transparent 70%);
}

.hbj-hero-shape-2 {
bottom: -50px; left: -100px; width: 500px; height: 500px;
background: radial-gradient(circle, #f0fdf4 0%, transparent 70%);
}

/* Diagonal Lines Pattern */
.hbj-hero-pattern {
position: absolute;
top: 0; right: 0; width: 50%; height: 100%;
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 20px,
rgba(0, 0, 0, 0.01) 20px,
rgba(0, 0, 0, 0.01) 40px
);
mask-image: linear-gradient(to right, transparent, black);
-webkit-mask-image: linear-gradient(to right, transparent, black);
}

.hbj-hero-content {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 60px;
position: relative;
z-index: 10;
}

.hbj-hero-text {
max-width: 600px;
}

.hbj-hero-text h1 {
font-size: 56px;
line-height: 1.2;
font-weight: 900;
color: #000;
margin-bottom: 24px;
letter-spacing: -1px;
}

/* Red highlight for keywords */
.hbj-text-highlight {
color: #cc0000; /* Vivid Red */
}

.hbj-hero-text p {
font-size: 16px;
color: #333;
margin-bottom: 40px;
font-weight: 500;
line-height: 1.8;
}

.hbj-cta-wrapper {
display: flex;
align-items: flex-start;
gap: 24px;
}

.hbj-cta-main {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}

.hbj-btn-green {
background-color: #1a8d46; /* Green */
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 16px 60px;
border-radius: 4px;
border: none;
cursor: pointer;
transition: background 0.3s, transform 0.2s;
box-shadow: 0 4px 10px rgba(26, 141, 70, 0.3);
}

.hbj-btn-green:hover {
background-color: #146c36;
transform: translateY(-2px);
}

.hbj-link-sub {
font-size: 14px;
color: #cc0000;
text-decoration: none;
font-weight: 500;
}
.hbj-link-sub:hover { text-decoration: underline; }

/* Badge Styling */
.hbj-award-badge {
border: 1px solid #c5a065;
padding: 10px 15px;
text-align: center;
color: #c5a065;
font-size: 10px;
line-height: 1.2;
position: relative;
background: #fff;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
/* Ribbon tail effect */
.hbj-award-badge::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #c5a065;
}
.hbj-award-icon {
font-size: 20px;
display: block;
margin-bottom: 4px;
}

/* Visual Area */
.hbj-hero-visual {
position: relative;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}

/* 3D Coin CSS */
.hbj-coin-3d {
width: 250px;
height: 250px;
background: radial-gradient(circle at 30% 30%, #f0f0f0, #999);
border-radius: 50%;
border: 10px solid #dcdcdc;
box-shadow: 
inset 0 0 20px rgba(0,0,0,0.2),
0 20px 50px rgba(0,0,0,0.3);
display: flex;
align-items: center;
justify-content: center;
font-size: 140px;
font-weight: bold;
color: #666;
text-shadow: 2px 2px 0px rgba(255,255,255,0.5), -1px -1px 0 rgba(0,0,0,0.3);
animation: coinFloat 6s ease-in-out infinite;
position: relative;
}
/* Coin Edge detail */
.hbj-coin-3d::before {
content: '';
position: absolute;
top: 5px; left: 5px; right: 5px; bottom: 5px;
border-radius: 50%;
border: 2px dashed rgba(0,0,0,0.1);
}

@keyframes coinFloat {
0%, 100% { transform: translateY(0) rotateY(0deg); }
50% { transform: translateY(-20px) rotateY(10deg); }
}

/* * =========================================
 * Market Section (TradingView)
 * =========================================
 */
.hbj-market {
background: #f7f9fc;
padding: 40px 0 60px;
position: relative;
z-index: 20;
}

.hbj-tv-container {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
background: #fff;
padding: 10px;
}

/* * =========================================
 * Features (Dark Modern)
 * =========================================
 */
.hbj-features {
padding: 100px 0;
background: #fff;
}

.hbj-section-header {
text-align: center;
margin-bottom: 80px;
}
.hbj-section-header h2 {
font-size: 36px;
color: var(--hbj-text-dark);
margin-bottom: 16px;
font-weight: 800;
}
.hbj-section-header p { color: var(--hbj-text-gray); }

.hbj-features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}

.hbj-feature-box {
padding: 40px;
border-radius: 20px;
background: #fff;
border: 1px solid #eee;
transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
}

/* Subtle Gradient Border Effect on Hover */
.hbj-feature-box::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, var(--hbj-blue-primary), #00d2ff);
opacity: 0;
transition: 0.3s;
}

.hbj-feature-box:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.08);
border-color: transparent;
}
.hbj-feature-box:hover::before { opacity: 1; }

.hbj-icon-circle {
width: 64px; height: 64px;
border-radius: 16px;
background: #eff5ff;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
color: var(--hbj-blue-primary);
}
.hbj-icon-circle svg { width: 32px; height: 32px; fill: currentColor; }

.hbj-feature-box h3 { font-size: 20px; margin-bottom: 12px; font-weight: 700; }
.hbj-feature-box p { color: #707a8a; line-height: 1.7; font-size: 15px; }


/* * =========================================
 * Details Zigzag Section
 * =========================================
 */
.hbj-details {
padding: 80px 0;
background: #fff;
position: relative;
}

.hbj-details-header {
text-align: center;
margin-bottom: 100px;
position: relative;
}
.hbj-details-header h2 {
font-size: 32px;
color: var(--hbj-navy-base);
margin-bottom: 16px;
font-weight: 800;
}
.hbj-details-header p {
color: var(--hbj-text-gray);
font-size: 16px;
}

.hbj-zigzag-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 80px;
margin-bottom: 120px;
}
.hbj-zigzag-item:last-child { margin-bottom: 0; }

/* Reverse layout for even items */
.hbj-zigzag-item:nth-child(even) {
flex-direction: row-reverse;
}

.hbj-zigzag-content {
flex: 1;
max-width: 500px;
}

.hbj-zigzag-content h3 {
font-size: 28px;
color: var(--hbj-blue-primary);
margin-bottom: 24px;
font-weight: 700;
line-height: 1.3;
}

.hbj-highlight-text {
color: var(--hbj-navy-dark);
}

.hbj-zigzag-content p {
color: var(--hbj-text-gray);
line-height: 1.8;
font-size: 16px;
margin-bottom: 24px;
}

.hbj-small-note {
font-size: 12px;
color: #999;
display: block;
margin-top: 10px;
}

.hbj-zigzag-img {
flex: 1;
display: flex;
justify-content: center;
position: relative;
}

.hbj-illustration {
width: 100%;
max-width: 400px;
height: auto;
filter: drop-shadow(0 20px 40px rgba(43, 107, 245, 0.15));
transition: transform 0.5s ease;
}

.hbj-zigzag-item:hover .hbj-illustration {
transform: scale(1.02) translateY(-5px);
}

/* * =========================================
 * CEO Section
 * =========================================
 */
.hbj-ceo {
background: linear-gradient(90deg, #6a4cff 0%, #29b6f6 100%);
color: #fff;
padding: 80px 0;
overflow: hidden;
position: relative;
}

.hbj-ceo-container {
display: flex;
align-items: center;
justify-content: center;
gap: 60px;
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
}

.hbj-ceo-image {
flex: 0 0 350px;
position: relative;
}

.hbj-ceo-photo {
width: 100%;
height: auto;
border-radius: 8px;
filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2));
display: block; 
}

.hbj-ceo-content {
flex: 1;
}

.hbj-ceo-name {
font-size: 36px;
font-weight: 700;
margin-bottom: 8px;
line-height: 1.2;
}

.hbj-ceo-role {
font-size: 16px;
color: #6effff;
margin-bottom: 32px;
font-weight: 500;
}

.hbj-ceo-desc {
font-size: 14px;
line-height: 2.0;
opacity: 0.95;
text-align: justify;
}

/* * =========================================
 * Footer
 * =========================================
 */
.hbj-footer {
background: #0b0e14;
color: #848e9c;
padding: 80px 0 40px;
font-size: 13px;
}

.hbj-footer-grid {
display: grid;
grid-template-columns: 1.5fr repeat(3, 1fr);
gap: 40px;
padding-bottom: 60px;
border-bottom: 1px solid #1e2329;
}

.hbj-footer-logo {
color: #fff;
font-size: 20px;
font-weight: 700;
margin-bottom: 24px;
display: block;
}

.hbj-footer-col h4 { color: #eaecef; margin-bottom: 24px; font-size: 15px; }
.hbj-footer-col a { display: block; margin-bottom: 16px; transition: color 0.2s; }
.hbj-footer-col a:hover { color: var(--hbj-blue-primary); }

.hbj-copy {
padding-top: 40px;
text-align: center;
color: #474d57;
}

/* Disclaimer */
.hbj-footer-disclaimer {
margin-top: 40px;
padding: 24px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
font-size: 12px;
color: #707a8a;
line-height: 1.6;
}
.hbj-footer-disclaimer h4 {
color: #dce0e6;
margin-bottom: 12px;
font-size: 13px;
font-weight: 700;
}
.hbj-footer-disclaimer ul {
list-style: none;
padding: 0;
}
.hbj-footer-disclaimer li {
margin-bottom: 6px;
position: relative;
padding-left: 14px;
}
.hbj-footer-disclaimer li::before {
content: '・';
position: absolute;
left: 0;
color: #848e9c;
}

/* * =========================================
 * Responsive
 * =========================================
 */
@media (max-width: 1024px) {
.hbj-hero-content {
grid-template-columns: 1fr;
text-align: center;
gap: 40px;
}
.hbj-hero-text { margin: 0 auto; }
.hbj-hero-visual { display: none; }
.hbj-hero-pattern { display: none; }

.hbj-features-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
.hbj-ceo-container {
flex-direction: column;
text-align: center;
gap: 40px;
}
.hbj-ceo-image {
flex: 0 0 auto;
width: 200px;
}
.hbj-ceo-desc { text-align: left; }
.hbj-zigzag-item {
flex-direction: column !important;
gap: 40px;
text-align: center;
margin-bottom: 80px;
}
.hbj-zigzag-content { max-width: 100%; }
.hbj-zigzag-img { width: 100%; }
.hbj-illustration { max-width: 280px; }
}

@media (max-width: 768px) {
.hbj-header { padding: 0 20px; }
.hbj-nav-desktop, .hbj-auth-btns { display: none; }
.hbj-menu-trigger { display: block; }

.hbj-hero-text h1 { font-size: 36px; }

.hbj-features-grid { grid-template-columns: 1fr; }
.hbj-footer-grid { grid-template-columns: 1fr; gap: 30px; }
}

:root {
--hb-primary: #E6002D; 
--hb-text-main: #1F2329;
--hb-text-sub: #5E6D82;
--hb-bg-white: #FFFFFF;
--hb-bg-gray: #F7F8FA;
--hb-border: #E6E8EA;
--hb-font: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.hb-wrapper {
font-family: var(--hb-font);
color: var(--hb-text-main);
background-color: var(--hb-bg-white);
line-height: 1.6;
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
}

.hb-container {
max-width: 960px; /* 会社概要向けに少し幅を狭めて読みやすく */
margin: 0 auto;
padding: 0 20px;
width: 100%;
}

/* --- Page Title Area --- */
.hb-page-header {
background-color: var(--hb-bg-white);
text-align: center;
}

.hb-page-title {
font-size: 28px;
font-weight: 700;
margin:10px 0 !important;
}

.hb-page-subtitle {
font-size: 14px;
color: var(--hb-text-sub);
text-transform: uppercase;
letter-spacing: 0.05em;
}

/* --- Company Info Table (Definition List) --- */
.hb-info-section {
padding-bottom: 80px;
flex-grow: 1;
}

.hb-dl {
display: flex;
flex-direction: column;
border-top: 1px solid var(--hb-border);
}

.hb-row {
display: flex;
flex-direction: column; /* SP: 縦積み */
border-bottom: 1px solid var(--hb-border);
}

.hb-dt {
background-color: var(--hb-bg-gray);
padding: 16px 20px;
font-weight: 700;
font-size: 14px;
color: var(--hb-text-main);
display: flex;
align-items: center;
}

.hb-dd {
padding: 16px 20px;
font-size: 14px;
color: var(--hb-text-main);
background-color: var(--hb-bg-white);
line-height: 1.8;
}

/* 事業内容リスト */
.hb-service-list {
list-style: none;
padding: 0;
}
.hb-service-list li {
margin-bottom: 8px;
position: relative;
padding-left: 16px;
}
.hb-service-list li::before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 6px;
height: 6px;
background-color: var(--hb-primary);
border-radius: 50%;
}

/* --- Responsive Desktop --- */
@media (min-width: 768px) {
.hb-page-title {
font-size: 36px;
}

.hb-row {
flex-direction: row; /* PC: 横並び */
}
.hb-dt {
width: 25%;
padding: 24px 30px;
}
.hb-dd {
width: 75%;
padding: 24px 30px;
}
}
.hb-wrapper {
font-family: var(--hb-font);
color: var(--hb-text-main);
background-color: var(--hb-bg-white);
line-height: 1.6;
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
}

.hb-container {
max-width: 1080px; /* 料金表のために少し広めに */
margin: 0 auto;
padding: 0 20px;
width: 100%;
}

/* --- Page Title Area (共通デザイン) --- */
.hb-page-header {
background-color: var(--hb-bg-white);
text-align: center;
border-bottom: 1px solid var(--hb-bg-gray);
}

.hb-page-title {
font-size: 28px;
font-weight: 700;
margin-bottom: 10px;
color: var(--hb-text-main);
}

.hb-page-subtitle {
font-size: 14px;
color: var(--hb-text-sub);
text-transform: uppercase;
letter-spacing: 0.05em;
}

/* --- Pricing Section --- */
.hb-fee-section {
padding: 60px 0 80px;
background-color: var(--hb-bg-gray);
flex-grow: 1;
}

.hb-section-head {
text-align: center;
margin-bottom: 40px;
}

.hb-section-title {
font-size: 22px;
font-weight: 700;
margin-bottom: 12px;
}

.hb-section-desc {
font-size: 14px;
color: var(--hb-text-sub);
}

/* --- Pricing Cards Grid --- */
.hb-pricing-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
margin-bottom: 60px;
}

.hb-card {
background: var(--hb-bg-white);
border: 1px solid var(--hb-border);
border-radius: 8px;
padding: 40px 30px;
width: 100%;
max-width: 340px;
display: flex;
flex-direction: column;
transition: transform 0.2s, box-shadow 0.2s;
position: relative;
}

.hb-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(0,0,0,0.08);
border-color: var(--hb-primary);
}

/* Recommend Badge */
.hb-card.is-popular {
border-top: 4px solid var(--hb-primary);
}
.hb-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background-color: var(--hb-primary);
color: white;
padding: 4px 12px;
font-size: 11px;
font-weight: 700;
border-radius: 20px;
text-transform: uppercase;
}

.hb-card-plan {
font-size: 18px;
font-weight: 700;
color: var(--hb-text-main);
margin-bottom: 10px;
text-align: center;
}

.hb-card-price {
font-size: 32px;
font-weight: 700;
color: var(--hb-primary);
text-align: center;
margin-bottom: 20px;
letter-spacing: -0.02em;
}
.hb-card-price span {
font-size: 14px;
color: var(--hb-text-sub);
font-weight: normal;
margin-left: 4px;
}

.hb-card-desc {
font-size: 13px;
color: var(--hb-text-sub);
text-align: center;
margin-bottom: 30px;
min-height: 40px;
}

.hb-feature-list {
list-style: none;
margin-bottom: 30px;
flex-grow: 1;
}

.hb-feature-list li {
font-size: 14px;
margin-bottom: 12px;
padding-left: 24px;
position: relative;
color: var(--hb-text-main);
}

.hb-feature-list li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--hb-primary);
font-weight: bold;
}

.hb-feature-list li.disabled {
color: #ccc;
text-decoration: line-through;
}
.hb-feature-list li.disabled::before {
content: "-";
color: #ccc;
}

.hb-btn {
display: block;
width: 100%;
padding: 14px;
text-align: center;
background-color: var(--hb-primary);
color: white;
text-decoration: none;
font-weight: 700;
font-size: 14px;
border-radius: 4px;
transition: background-color 0.2s;
}
.hb-btn:hover {
background-color: var(--hb-primary-dark);
}
.hb-btn-outline {
background-color: transparent;
color: var(--hb-text-main);
border: 1px solid var(--hb-border);
}
.hb-btn-outline:hover {
border-color: var(--hb-text-main);
background-color: rgba(0,0,0,0.02);
}

/* --- Corporate Table --- */
.hb-corporate-section {
background-color: white;
padding: 40px;
border-radius: 8px;
border: 1px solid var(--hb-border);
}

.hb-table-wrap {
overflow-x: auto;
}

.hb-table {
width: 100%;
border-collapse: collapse;
min-width: 600px;
}

.hb-table th, .hb-table td {
padding: 16px 20px;
text-align: left;
border-bottom: 1px solid var(--hb-border);
font-size: 14px;
}

.hb-table th {
font-weight: 700;
width: 30%;
white-space: nowrap;
}

.hb-table td {
color: var(--hb-text-sub);
}

.hb-price-tag {
font-weight: 700;
color: var(--hb-text-main);
}

/* --- Disclaimer Area --- */
.hb-disclaimer {
margin-top: 40px;
padding: 20px;
background-color: #fff;
border: 1px solid var(--hb-border);
border-radius: 4px;
font-size: 12px;
color: var(--hb-text-sub);
line-height: 1.6;
}
.hb-disclaimer strong {
color: var(--hb-text-main);
display: block;
margin-bottom: 8px;
}

/* --- Responsive --- */
@media (min-width: 768px) {
.hb-page-title { font-size: 36px; }
.hb-card { margin-bottom: 0; }
}
.hb-form-section {
padding: 60px 0 80px;
background-color: var(--hb-bg-gray);
flex-grow: 1;
}

.hb-form-wrapper {
background-color: var(--hb-bg-white);
padding: 40px;
border-radius: 8px;
border: 1px solid var(--hb-border);
box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.hb-form-intro {
text-align: center;
margin-bottom: 30px;
font-size: 14px;
color: var(--hb-text-main);
}

/* --- Code Block Style (For CF7 Code) --- */
.hb-code-container {
margin-bottom: 50px;
border-radius: 8px;
overflow: hidden;
}
.hb-code-header {
background-color: var(--hb-primary);
color: white;
padding: 10px 20px;
font-weight: bold;
font-size: 14px;
}
.hb-code-area {
width: 100%;
height: 300px;
background-color: #282c34;
color: #e5c07b; /* Gold/Yellowish for text */
padding: 20px;
font-family: monospace;
font-size: 13px;
line-height: 1.5;
border: none;
resize: vertical;
white-space: pre;
}

/* Input Group Row */
.hb-form-row {
margin-bottom: 24px;
}

/* Label Styling */
.hb-label {
display: block;
font-weight: 700;
font-size: 14px;
margin-bottom: 8px;
color: var(--hb-text-main);
}

/* Required Badge */
.hb-required-badge {
display: inline-block;
background-color: var(--hb-primary);
color: white;
font-size: 10px;
padding: 2px 6px;
border-radius: 2px;
margin-left: 8px;
vertical-align: middle;
font-weight: normal;
}

.hb-optional-badge {
display: inline-block;
background-color: var(--hb-text-sub);
color: white;
font-size: 10px;
padding: 2px 6px;
border-radius: 2px;
margin-left: 8px;
vertical-align: middle;
font-weight: normal;
}

/* Input Fields (Text, Email, Tel, Select) */
.hb-input-text,
.hb-input-email,
.hb-input-tel,
.hb-select,
.hb-textarea {
width: 100%;
padding: 12px 16px;
font-size: 15px;
color: var(--hb-text-main);
background-color: #fff;
border: 1px solid var(--hb-border);
border-radius: 4px;
appearance: none; /* Remove default browser styles */
transition: border-color 0.2s, box-shadow 0.2s;
}

/* Focus State */
.hb-input-text:focus,
.hb-input-email:focus,
.hb-input-tel:focus,
.hb-select:focus,
.hb-textarea:focus {
outline: none;
border-color: var(--hb-border-focus);
box-shadow: 0 0 0 3px rgba(230, 0, 45, 0.1);
}

/* Select Arrow Customization */
.hb-select-wrapper {
position: relative;
}
.hb-select-wrapper::after {
content: "";
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
border-style: solid;
border-width: 6px 5px 0 5px;
border-color: var(--hb-text-sub) transparent transparent transparent;
pointer-events: none;
}

/* Textarea */
.hb-textarea {
min-height: 120px;
resize: vertical;
}

/* Checkbox (Privacy Policy) */
.hb-checkbox-wrapper {
margin: 30px 0;
text-align: center;
}
.hb-checkbox-label {
font-size: 14px;
cursor: pointer;
display: inline-flex;
align-items: center;
}
/* CF7 specific checkbox styling adjustment might be needed depending on theme, 
   but standard checkbox styling below works for default browser checkbox */
.hb-checkbox-input {
margin-right: 8px;
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--hb-primary);
}
.hb-link {
color: var(--hb-primary);
text-decoration: underline;
}
.hb-link:hover {
text-decoration: none;
}

/* Submit Button */
.hb-submit-wrapper {
text-align: center;
}
.hb-submit-btn {
background-color: var(--hb-primary);
color: white;
border: none;
padding: 16px 60px;
font-size: 16px;
font-weight: 700;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s, transform 0.1s;
width: 100%;
max-width: 300px;
}
.hb-submit-btn:hover {
background-color: var(--hb-primary-dark);
}
.hb-submit-btn:active {
transform: translateY(1px);
}

/* Placeholder Styling */
::placeholder {
color: #B0B3B8;
}

/* Responsive */
@media (max-width: 768px) {
.hb-form-wrapper {
padding: 30px 20px;
}
.hb-submit-btn {
width: 100%;
max-width: none;
}
}