/* === HTCTheme Components === */

/* === Feature Cards === */
.card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); transition: all var(--transition-slow); }
.card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); border-color: rgba(37,99,235,0.2); }
.card--flat { box-shadow: none; }
.card--blue { background: var(--color-primary-bg); border-color: rgba(37,99,235,0.2); }
.card--dark { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); }
.card--dark h3,.card--dark h4 { color: var(--color-white); }
.card--dark p { color: rgba(255,255,255,0.7); }
.card__icon { margin-bottom: var(--space-5); }
.card__icon svg { width: 40px; height: 40px; color: var(--color-primary); }
.card__tag { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); margin-bottom: var(--space-3); }
.card__title { font-size: var(--text-xl); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); color: var(--color-text); }
.card__body { font-size: var(--text-sm); color: var(--color-text-light); line-height: var(--leading-relaxed); margin: 0; }
.card__link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-primary); margin-top: var(--space-4); }
.card__link:hover { gap: var(--space-3); }
.card__link svg { width: 16px; height: 16px; transition: transform var(--transition-fast); }
.card__link:hover svg { transform: translateX(4px); }
.card--numbered .card__number { font-size: var(--text-4xl); font-weight: var(--weight-bold); color: var(--color-primary); opacity: 0.15; line-height: 1; margin-bottom: var(--space-2); }

/* === Stats Cards === */
.stats-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.stat-card { background: var(--color-bg-light); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); text-align: center; }
.stat-card__icon { font-size: 2rem; margin-bottom: var(--space-3); color: var(--color-primary); display: flex; justify-content: center; }
.stat-card__icon svg { width: 40px; height: 40px; }
.stat-card__value { font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--color-text); line-height: 1.2; margin-bottom: var(--space-1); }
.stat-card__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); margin-bottom: var(--space-1); }
.stat-card__desc { font-size: var(--text-xs); color: var(--color-text-light); }

/* === Horizontal Stats Bar === */
.stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.stats-bar__item { padding: var(--space-8) var(--space-6); text-align: center; border-right: 1px solid var(--color-border); }
.stats-bar__item:last-child { border-right: none; }
.stats-bar__icon { display: flex; justify-content: center; margin-bottom: var(--space-3); color: var(--color-primary); }
.stats-bar__icon svg { width: 36px; height: 36px; }
.stats-bar__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); }
.stats-bar__desc { font-size: var(--text-xs); color: var(--color-text-light); margin-top: var(--space-1); }

/* === Value Cards (3 per row with icon, title, list) === */
.value-card { display: flex; flex-direction: column; gap: var(--space-3); }
.value-card__icon { color: var(--color-primary); }
.value-card__icon svg { width: 32px; height: 32px; }
.value-card__title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text); }
.value-card__list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.value-card__list li { font-size: var(--text-sm); color: var(--color-text-light); display: flex; gap: var(--space-2); }
.value-card__list li::before { content: '→'; color: var(--color-primary); flex-shrink: 0; }

/* === Why Invest cards === */
.why-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-8); background: var(--color-bg-light); border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.why-card__icon { width: 56px; height: 56px; background: var(--color-primary-bg); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--color-primary); }
.why-card__icon svg { width: 28px; height: 28px; }
.why-card__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.why-card__body { font-size: var(--text-sm); color: var(--color-text-light); margin: 0; line-height: var(--leading-relaxed); }

/* === Timeline === */
.timeline { position: relative; padding-left: var(--space-8); }
.timeline::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--color-border); }
.timeline-item { position: relative; padding-bottom: var(--space-10); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ''; position: absolute; left: calc(-1 * var(--space-8) - 5px); top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary); border: 2px solid var(--color-white); box-shadow: 0 0 0 3px rgba(37,99,235,0.2); }
.timeline-item__year { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-primary); margin-bottom: var(--space-1); }
.timeline-item__title { font-size: var(--text-base); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.timeline-item__desc { font-size: var(--text-sm); color: var(--color-text-light); margin: 0; }

/* === Horizontal Timeline === */
.timeline-h { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; position: relative; }
.timeline-h::before { content: ''; position: absolute; top: 24px; left: 5%; right: 5%; height: 2px; background: linear-gradient(to right, var(--color-primary), var(--color-primary-light)); }
.timeline-h-item { text-align: center; position: relative; padding-top: var(--space-14); }
.timeline-h-item__dot { width: 48px; height: 48px; border-radius: 50%; background: var(--color-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto; position: absolute; top: 0; left: 50%; transform: translateX(-50%); border: 3px solid var(--color-white); box-shadow: 0 0 0 3px rgba(37,99,235,0.2); }
.timeline-h-item__dot svg { width: 22px; height: 22px; color: white; }
.timeline-h-item__year { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-primary); margin-bottom: var(--space-1); }
.timeline-h-item__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
.timeline-h-item__desc { font-size: var(--text-xs); color: var(--color-text-light); }

/* === Contact Form === */
.form-group { margin-bottom: var(--space-5); }
.form-label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); margin-bottom: var(--space-2); }
.form-control { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-base); font-family: var(--font-primary); color: var(--color-text); background: var(--color-white); transition: border-color var(--transition-fast); outline: none; }
.form-control:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.form-control::placeholder { color: var(--color-text-lighter); }
.form-control--select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
textarea.form-control { resize: vertical; min-height: 120px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-submit { display: flex; justify-content: flex-start; margin-top: var(--space-6); }

/* === Contact Info List === */
.contact-info { list-style: none; display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-6); }
.contact-info__item { display: flex; align-items: flex-start; gap: var(--space-4); }
.contact-info__icon { width: 44px; height: 44px; background: var(--color-primary-bg); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--color-primary); flex-shrink: 0; }
.contact-info__icon svg { width: 20px; height: 20px; }
.contact-info__label { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-light); margin-bottom: var(--space-1); }
.contact-info__value { font-size: var(--text-sm); color: var(--color-text); font-weight: var(--weight-medium); }
.contact-info__value a { color: var(--color-text); }
.contact-info__value a:hover { color: var(--color-primary); }

/* === Ecosystem Flow (horizontal with arrows) === */
.ecosystem-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; align-items: start; }
.eco-node { text-align: center; padding: var(--space-6) var(--space-4); position: relative; }
.eco-node:not(:last-child)::after { content: ''; position: absolute; right: -10px; top: 50px; width: 20px; height: 2px; background: var(--color-primary); }
.eco-node__icon { width: 64px; height: 64px; border-radius: var(--radius-lg); background: var(--color-primary-bg); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4); }
.eco-node__icon svg { width: 32px; height: 32px; color: var(--color-primary); }
.eco-node__title { font-size: var(--text-base); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.eco-node__desc { font-size: var(--text-sm); color: var(--color-text-light); }

/* === Highlight box (investment thesis, mission/vision) === */
.info-box { background: var(--color-navy); color: var(--color-white); border-radius: var(--radius-xl); padding: var(--space-8); }
.info-box h3,.info-box h4 { color: var(--color-white); margin-bottom: var(--space-6); }
.info-box-item { display: flex; gap: var(--space-4); margin-bottom: var(--space-6); }
.info-box-item:last-child { margin-bottom: 0; }
.info-box-item__icon { width: 44px; height: 44px; background: rgba(37,99,235,0.3); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.info-box-item__icon svg { width: 22px; height: 22px; color: var(--color-primary-lighter); }
.info-box-item__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-white); margin-bottom: var(--space-1); }
.info-box-item__desc { font-size: var(--text-xs); color: rgba(255,255,255,0.6); margin: 0; }

/* === Key Highlights === */
.key-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.key-highlight { display: flex; gap: var(--space-4); align-items: flex-start; }
.key-highlight__icon { color: var(--color-primary); flex-shrink: 0; }
.key-highlight__icon svg { width: 32px; height: 32px; }
.key-highlight__label { font-size: var(--text-xs); color: var(--color-text-light); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-1); }
.key-highlight__value { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--color-text); line-height: 1; }
.key-highlight__sub { font-size: var(--text-xs); color: var(--color-text-light); margin-top: var(--space-1); }

/* === Vision quote === */
.vision-quote { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: white; border-radius: var(--radius-2xl); padding: var(--space-16) var(--space-12); text-align: center; }
.vision-quote__text { font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: var(--weight-medium); line-height: var(--leading-relaxed); max-width: 800px; margin: 0 auto; }
.vision-quote__text .highlight { color: #93C5FD; font-weight: var(--weight-bold); font-style: italic; }

/* === Tagline large === */
.tagline-block { padding: var(--space-12) 0; }
.tagline-block__text { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: var(--weight-bold); color: var(--color-text); }
.tagline-block__text .highlight { color: var(--color-primary); }

/* === Partner/CTA dark section === */
.cta-dark { background: var(--color-navy); border-radius: var(--radius-2xl); padding: var(--space-12) var(--space-16); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-8); }
.cta-dark h3 { color: var(--color-white); font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.cta-dark p { color: rgba(255,255,255,0.7); margin: 0; font-size: var(--text-sm); }

/* === Social links === */
.social-links { display: flex; gap: var(--space-3); }
.social-link { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); transition: all var(--transition-fast); border: 1px solid rgba(255,255,255,0.15); }
.social-link:hover { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.social-link svg { width: 18px; height: 18px; }

/* === Business hours === */
.business-hours { font-size: var(--text-sm); color: var(--color-text-light); }
.business-hours strong { color: var(--color-text); display: block; margin-bottom: var(--space-2); }

/* === Why Partner box === */
.why-partner { background: var(--color-navy); border-radius: var(--radius-xl); padding: var(--space-8); color: white; }
.why-partner h3 { color: white; font-size: var(--text-xl); margin-bottom: var(--space-6); }
.why-partner-item { display: flex; gap: var(--space-3); margin-bottom: var(--space-5); }
.why-partner-item:last-child { margin-bottom: 0; }
.why-partner-item__icon { width: 40px; height: 40px; background: rgba(37,99,235,0.3); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.why-partner-item__icon svg { width: 20px; height: 20px; color: var(--color-primary-lighter); }
.why-partner-item__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: white; margin-bottom: var(--space-1); }
.why-partner-item__desc { font-size: var(--text-xs); color: rgba(255,255,255,0.6); margin: 0; }

/* === Mission/Vision/Purpose box === */
.mvp-box { background: var(--color-navy); color: white; border-radius: var(--radius-xl); padding: var(--space-8); }
.mvp-box__item { display: flex; gap: var(--space-4); padding: var(--space-5) 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.mvp-box__item:last-child { border-bottom: none; padding-bottom: 0; }
.mvp-box__item:first-child { padding-top: 0; }
.mvp-box__icon { width: 44px; height: 44px; background: rgba(37,99,235,0.3); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mvp-box__icon svg { width: 22px; height: 22px; color: #93C5FD; }
.mvp-box__title { font-size: var(--text-sm); font-weight: var(--weight-bold); color: white; margin-bottom: var(--space-1); }
.mvp-box__desc { font-size: var(--text-xs); color: rgba(255,255,255,0.65); margin: 0; line-height: var(--leading-relaxed); }