/* ==========================================================================
   Huge Coder — component styles
   Loaded after style.css (which defines tokens, reset, header, footer).
   ========================================================================== */

/* --------------------------------------------------------------------
   Icons
   -------------------------------------------------------------------- */
.hc-icon { display: inline-flex; }
.hc-icon svg { width: 1em; height: 1em; }

/* --------------------------------------------------------------------
   Page hero (interior pages)
   -------------------------------------------------------------------- */
.page-hero {
	background: var(--hc-navy);
	color: var(--hc-white);
	padding: clamp(90px, 8vw + 40px, 150px) 0 clamp(60px, 5vw, 90px);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.page-hero::before,
.page-hero::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.35;
	pointer-events: none;
}
.page-hero::before { width: 340px; height: 340px; background: var(--hc-teal); top: -120px; right: -80px; }
.page-hero::after { width: 280px; height: 280px; background: var(--hc-coral); bottom: -140px; left: -60px; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: var(--hc-white); margin-bottom: 0.4em; }
.page-hero p { color: rgba(255,255,255,0.78); max-width: 62ch; margin-inline: auto; font-size: 1.1rem; }
.page-hero .eyebrow { background: rgba(255,255,255,0.12); color: var(--hc-teal); }
.page-hero .eyebrow::before { background: var(--hc-coral); }

.breadcrumbs { margin-top: 22px; font-size: 0.9rem; color: rgba(255,255,255,0.6); display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.breadcrumbs a { color: rgba(255,255,255,0.75); }
.breadcrumbs a:hover { color: var(--hc-teal); }

/* --------------------------------------------------------------------
   Hero (home)
   -------------------------------------------------------------------- */
.hero {
	position: relative;
	overflow: hidden;
	padding: clamp(70px, 8vw, 130px) 0 clamp(60px, 6vw, 110px);
	background: linear-gradient(180deg, var(--hc-bg-peach) 0%, #ffffff 100%);
}
.hero-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 48px;
	align-items: center;
}
.hero-content h1 { margin-bottom: 0.45em; }
.hero-content .highlight { color: var(--hc-coral-dark); position: relative; white-space: nowrap; }
.hero-content p.lede { font-size: 1.15rem; color: var(--hc-text-soft); max-width: 52ch; }
.hero-actions { display: flex; gap: 16px; margin-top: 34px; flex-wrap: wrap; }

.hero-stats { display: flex; gap: 34px; margin-top: 48px; flex-wrap: wrap; }
.hero-stats div strong { display: block; font-family: var(--hc-font-heading); font-size: 1.7rem; color: var(--hc-navy); }
.hero-stats div span { font-size: 0.88rem; color: var(--hc-text-soft); }

.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; }
.hero-visual .hero-art {
	width: 100%;
	aspect-ratio: 1 / 1;
	max-width: 460px;
	border-radius: var(--hc-radius-lg);
	background: linear-gradient(145deg, var(--hc-navy), #1f3a4d 60%, var(--hc-teal) 150%);
	position: relative;
	box-shadow: var(--hc-shadow-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.hero-visual .hero-art::before {
	content: '';
	position: absolute;
	inset: -30%;
	background: radial-gradient(circle at 30% 20%, rgba(71,237,230,0.35), transparent 55%), radial-gradient(circle at 80% 80%, rgba(255,154,150,0.35), transparent 55%);
}
.hero-visual lottie-player { width: 78%; height: 78%; position: relative; z-index: 1; }
.hero-visual .hero-art-fallback { position: relative; z-index: 1; width: 60%; opacity: 0.9; }

.floating-card {
	position: absolute;
	background: var(--hc-white);
	border-radius: var(--hc-radius);
	box-shadow: var(--hc-shadow);
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--hc-navy);
	animation: hc-float 5s ease-in-out infinite;
}
.floating-card .hc-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--hc-bg-peach); color: var(--hc-coral-dark); flex-shrink: 0; }
.floating-card--1 { top: 6%; left: -6%; }
.floating-card--2 { bottom: 10%; right: -8%; animation-delay: 1.2s; }
@keyframes hc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .floating-card { animation: none; } }

@media (max-width: 980px) {
	.hero-grid { grid-template-columns: 1fr; }
	.hero-visual { order: -1; }
	.floating-card { display: none; }
}

/* --------------------------------------------------------------------
   Logo / trust strip
   -------------------------------------------------------------------- */
.trust-strip { padding: 36px 0; border-top: 1px solid rgba(39,67,89,0.08); border-bottom: 1px solid rgba(39,67,89,0.08); }
.trust-strip p { text-align: center; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hc-text-soft); margin-bottom: 24px; font-weight: 600; }
.trust-row { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 64px); flex-wrap: wrap; opacity: 0.65; }
.trust-row span { font-family: var(--hc-font-heading); font-weight: 700; font-size: 1.15rem; color: var(--hc-navy); }

/* --------------------------------------------------------------------
   Feature / icon-box grid
   -------------------------------------------------------------------- */
.grid { display: grid; gap: 28px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.feature-card {
	background: var(--hc-white);
	border-radius: var(--hc-radius);
	padding: 34px 28px;
	border: 1px solid rgba(39,67,89,0.08);
	transition: transform 0.3s var(--hc-ease), box-shadow 0.3s var(--hc-ease), border-color 0.3s var(--hc-ease);
}
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--hc-shadow); border-color: transparent; }
.feature-card .icon-wrap {
	width: 54px; height: 54px;
	border-radius: 16px;
	display: flex; align-items: center; justify-content: center;
	background: var(--hc-bg-peach);
	color: var(--hc-coral-dark);
	font-size: 1.5rem;
	margin-bottom: 20px;
}
.feature-card.is-teal .icon-wrap { background: rgba(71,237,230,0.16); color: var(--hc-teal-dark); }
.feature-card.is-navy .icon-wrap { background: rgba(39,67,89,0.08); color: var(--hc-navy); }
.feature-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.feature-card p { color: var(--hc-text-soft); font-size: 0.97rem; margin-bottom: 0; }

/* --------------------------------------------------------------------
   Solutions / product cards
   -------------------------------------------------------------------- */
.solution-card {
	position: relative;
	background: var(--hc-white);
	border-radius: var(--hc-radius-lg);
	padding: 40px 34px;
	box-shadow: var(--hc-shadow-sm);
	border: 1px solid rgba(39,67,89,0.06);
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: transform 0.3s var(--hc-ease), box-shadow 0.3s var(--hc-ease);
}
.solution-card:hover { transform: translateY(-8px); box-shadow: var(--hc-shadow-lg); }
.solution-card .tag {
	align-self: flex-start;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--hc-bg-gray);
	color: var(--hc-navy);
	margin-bottom: 18px;
}
.solution-card .icon-wrap { width: 60px; height: 60px; border-radius: 18px; background: var(--hc-navy); color: var(--hc-teal); display: flex; align-items: center; justify-content: center; font-size: 1.7rem; margin-bottom: 22px; }
.solution-card h3 { margin-bottom: 12px; }
.solution-card p { color: var(--hc-text-soft); flex-grow: 1; }
.solution-card .card-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--hc-font-heading); font-weight: 600; color: var(--hc-navy); margin-top: 22px; }
.solution-card .card-link .hc-icon { transition: transform 0.25s var(--hc-ease); }
.solution-card .card-link:hover .hc-icon { transform: translateX(5px); }
.solution-card .card-link:hover { color: var(--hc-coral-dark); }

/* --------------------------------------------------------------------
   Stats / counters
   -------------------------------------------------------------------- */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat-item strong { display: block; font-family: var(--hc-font-heading); font-size: clamp(2rem, 1.4vw + 1.6rem, 2.6rem); color: inherit; }
.stat-item span { font-size: 0.9rem; opacity: 0.75; }
@media (max-width: 780px) { .stats-row { grid-template-columns: repeat(2, 1fr); row-gap: 36px; } }

/* --------------------------------------------------------------------
   Steps ("how it works")
   -------------------------------------------------------------------- */
.steps { counter-reset: hc-step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step-item { position: relative; padding: 30px 24px 24px; background: var(--hc-white); border: 1px solid rgba(39,67,89,0.08); border-radius: var(--hc-radius); }
.step-item::before {
	counter-increment: hc-step;
	content: counter(hc-step);
	position: absolute;
	top: -18px; left: 24px;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: var(--hc-coral);
	color: var(--hc-navy);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--hc-font-heading);
	font-weight: 700;
	box-shadow: 0 8px 18px -8px rgba(255,154,150,0.7);
}
.step-item h4 { margin: 12px 0 8px; }
.step-item p { color: var(--hc-text-soft); font-size: 0.94rem; }

/* --------------------------------------------------------------------
   Timeline (About Us)
   -------------------------------------------------------------------- */
.timeline { position: relative; max-width: 760px; margin-inline: auto; }
.timeline::before { content: ''; position: absolute; left: 20px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--hc-teal), var(--hc-coral)); }
.timeline-item { position: relative; padding-left: 60px; margin-bottom: 40px; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-item::before { content: ''; position: absolute; left: 12px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--hc-white); border: 3px solid var(--hc-navy); }
.timeline-item .year { font-family: var(--hc-font-heading); font-weight: 700; color: var(--hc-coral-dark); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }
.timeline-item h4 { margin: 6px 0 8px; }
.timeline-item p { color: var(--hc-text-soft); }

/* --------------------------------------------------------------------
   Values / badges
   -------------------------------------------------------------------- */
.value-list { display: flex; flex-direction: column; gap: 22px; }
.value-item { display: flex; gap: 18px; align-items: flex-start; }
.value-item .hc-icon { width: 46px; height: 46px; border-radius: 14px; background: var(--hc-bg-peach); color: var(--hc-coral-dark); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.value-item h4 { margin-bottom: 6px; }
.value-item p { color: var(--hc-text-soft); margin: 0; }

/* --------------------------------------------------------------------
   Team
   -------------------------------------------------------------------- */
.team-card { text-align: center; }
.team-avatar {
	width: 108px; height: 108px;
	border-radius: 50%;
	margin: 0 auto 18px;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--hc-font-heading);
	font-weight: 700;
	font-size: 1.6rem;
	color: var(--hc-white);
	background: linear-gradient(140deg, var(--hc-navy), var(--hc-teal-dark));
}
.team-card h4 { margin-bottom: 4px; }
.team-card .role { color: var(--hc-coral-dark); font-weight: 600; font-size: 0.88rem; margin-bottom: 10px; display: block; }

/* --------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------- */
.testimonial-card {
	background: var(--hc-white);
	border-radius: var(--hc-radius);
	padding: 32px 28px;
	box-shadow: var(--hc-shadow-sm);
	border: 1px solid rgba(39,67,89,0.06);
	height: 100%;
	display: flex;
	flex-direction: column;
}
.testimonial-card .stars { display: flex; gap: 3px; color: var(--hc-coral); margin-bottom: 16px; }
.testimonial-card .stars .hc-icon { width: 16px; height: 16px; }
.testimonial-card p.quote { font-size: 1rem; color: var(--hc-text); flex-grow: 1; }
.testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.testimonial-author .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--hc-bg-peach); color: var(--hc-navy); display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--hc-font-heading); flex-shrink: 0; }
.testimonial-author strong { display: block; font-size: 0.94rem; }
.testimonial-author span { font-size: 0.82rem; color: var(--hc-text-soft); }

/* --------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------- */
.pricing-toggle { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 44px; }
.pricing-toggle span { font-weight: 600; color: var(--hc-text-soft); font-size: 0.95rem; }
.pricing-toggle span.is-active { color: var(--hc-navy); }
.pricing-switch { position: relative; width: 56px; height: 30px; background: var(--hc-navy); border-radius: 999px; border: none; cursor: pointer; flex-shrink: 0; }
.pricing-switch::before { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--hc-white); transition: transform 0.25s var(--hc-ease); }
.pricing-switch.is-yearly::before { transform: translateX(26px); }
.pricing-toggle .badge-save { background: var(--hc-teal); color: var(--hc-navy); font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
@media (max-width: 980px) { .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

.price-card {
	background: var(--hc-white);
	border-radius: var(--hc-radius-lg);
	padding: 40px 32px;
	border: 1px solid rgba(39,67,89,0.1);
	display: flex;
	flex-direction: column;
	position: relative;
}
.price-card.is-featured {
	background: var(--hc-navy);
	color: var(--hc-white);
	border-color: transparent;
	box-shadow: var(--hc-shadow-lg);
	transform: scale(1.03);
}
.price-card.is-featured h3,
.price-card.is-featured .price-amount { color: var(--hc-white); }
.price-card.is-featured p { color: rgba(255,255,255,0.72); }
.price-card .badge-popular {
	position: absolute; top: -14px; right: 32px;
	background: var(--hc-coral); color: var(--hc-navy);
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
	text-transform: uppercase; padding: 6px 14px; border-radius: 999px;
}
.price-card h3 { margin-bottom: 6px; }
.price-card .plan-desc { color: var(--hc-text-soft); font-size: 0.92rem; margin-bottom: 24px; }
.price-card.is-featured .plan-desc { color: rgba(255,255,255,0.68); }
.price-amount { display: flex; align-items: baseline; gap: 4px; margin-bottom: 26px; font-family: var(--hc-font-heading); }
.price-amount .currency { font-size: 1.3rem; font-weight: 700; }
.price-amount .value { font-size: 3rem; font-weight: 800; line-height: 1; }
.price-amount .period { color: var(--hc-text-soft); font-size: 0.95rem; }
.price-card.is-featured .price-amount .period { color: rgba(255,255,255,0.6); }
.price-features { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 14px; flex-grow: 1; }
.price-features li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; }
.price-features .hc-icon { color: var(--hc-teal-dark); flex-shrink: 0; margin-top: 3px; }
.price-card.is-featured .price-features { color: var(--hc-white); }
.price-card.is-featured .price-features .hc-icon { color: var(--hc-teal); }
.price-features li.is-muted { opacity: 0.45; }
.price-features li.is-muted .hc-icon { color: var(--hc-text-soft); }

/* --------------------------------------------------------------------
   Comparison table (Free vs Pro)
   -------------------------------------------------------------------- */
.compare-table-wrap { overflow-x: auto; border-radius: var(--hc-radius-lg); box-shadow: var(--hc-shadow-sm); border: 1px solid rgba(39,67,89,0.08); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 620px; background: var(--hc-white); }
.compare-table th, .compare-table td { padding: 18px 24px; text-align: left; border-bottom: 1px solid rgba(39,67,89,0.08); }
.compare-table thead th { font-family: var(--hc-font-heading); background: var(--hc-bg-gray); }
.compare-table th.is-plan, .compare-table td.is-plan { text-align: center; width: 160px; }
.compare-table thead th.is-plan { color: var(--hc-navy); font-size: 1.05rem; }
.compare-table thead th.is-plan.is-pro { background: var(--hc-navy); color: var(--hc-white); }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody tr:hover { background: rgba(255,154,150,0.06); }
.compare-table .hc-icon.yes { color: var(--hc-teal-dark); }
.compare-table .hc-icon.no { color: #c7ced3; }
.compare-table td.is-plan.is-pro { background: rgba(39,67,89,0.03); }

/* Detailed variant: Free/Pro columns hold descriptive text (feature
   lists) rather than a single yes/no icon, so they need to be wider and
   left-aligned instead of the narrow centered icon column above. */
.compare-table--detailed { min-width: 760px; }
.compare-table--detailed th.is-plan,
.compare-table--detailed td.is-plan { text-align: left; width: 32%; }
.compare-table--detailed td.is-plan { font-size: 0.92rem; color: var(--hc-text-soft); }
.compare-table--detailed td.is-plan.is-pro { color: var(--hc-text); }
.compare-table--detailed td.is-plan .cell-none { color: #c7ced3; }
.compare-table--detailed td.is-plan .cell-add { color: var(--hc-navy); font-weight: 600; }
.compare-table--detailed td.is-plan.is-check,
.compare-table--detailed th.is-plan.is-check { text-align: center; width: 15%; }

/* --------------------------------------------------------------------
   Accordion (FAQ)
   -------------------------------------------------------------------- */
.accordion { display: flex; flex-direction: column; gap: 14px; }
.accordion-item { background: var(--hc-white); border: 1px solid rgba(39,67,89,0.1); border-radius: var(--hc-radius); overflow: hidden; }
.accordion-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	background: none;
	border: none;
	text-align: left;
	font-family: var(--hc-font-heading);
	font-weight: 600;
	font-size: 1.02rem;
	color: var(--hc-navy);
	cursor: pointer;
}
.accordion-trigger .hc-icon { flex-shrink: 0; transition: transform 0.3s var(--hc-ease); color: var(--hc-coral-dark); }
.accordion-item.is-open .accordion-trigger .hc-icon { transform: rotate(180deg); }
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--hc-ease); }
.accordion-panel-inner { padding: 0 24px 22px; color: var(--hc-text-soft); }

/* --------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------- */
.tabs-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; justify-content: center; }
.tabs-nav button {
	padding: 12px 22px;
	border-radius: 999px;
	border: 1px solid rgba(39,67,89,0.15);
	background: var(--hc-white);
	font-family: var(--hc-font-heading);
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--hc-text-soft);
	cursor: pointer;
	transition: all 0.25s var(--hc-ease);
}
.tabs-nav button.is-active { background: var(--hc-navy); border-color: var(--hc-navy); color: var(--hc-white); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* --------------------------------------------------------------------
   CTA banner
   -------------------------------------------------------------------- */
.cta-banner {
	position: relative;
	overflow: hidden;
	background: var(--hc-navy);
	border-radius: var(--hc-radius-lg);
	padding: clamp(44px, 5vw, 72px);
	text-align: center;
	color: var(--hc-white);
}
.cta-banner::before { content: ''; position: absolute; width: 320px; height: 320px; background: var(--hc-teal); opacity: 0.25; filter: blur(80px); border-radius: 50%; top: -140px; left: -80px; }
.cta-banner::after { content: ''; position: absolute; width: 280px; height: 280px; background: var(--hc-coral); opacity: 0.25; filter: blur(80px); border-radius: 50%; bottom: -140px; right: -60px; }
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 { color: var(--hc-white); max-width: 20ch; margin-inline: auto; }
.cta-banner p { color: rgba(255,255,255,0.75); max-width: 54ch; margin-inline: auto; }
.cta-actions { display: flex; gap: 16px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }

/* --------------------------------------------------------------------
   Forms (contact form)
   -------------------------------------------------------------------- */
.contact-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 40px; align-items: start; }
@media (max-width: 980px) { .contact-layout { grid-template-columns: 1fr; } }

.contact-info-card {
	background: var(--hc-navy);
	color: var(--hc-white);
	border-radius: var(--hc-radius-lg);
	padding: 40px 34px;
}
.contact-info-card h3 { color: var(--hc-white); }
.contact-info-card > p { color: rgba(255,255,255,0.72); margin-bottom: 30px; }
.contact-info-list { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.contact-info-list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-info-list .hc-icon { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,0.1); color: var(--hc-teal); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-info-list strong { display: block; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.55); margin-bottom: 3px; }
.contact-info-list a, .contact-info-list span.value { color: var(--hc-white); font-weight: 500; }
.contact-info-card .social-links a { background: rgba(255,255,255,0.1); }

.contact-form-card {
	background: var(--hc-white);
	border-radius: var(--hc-radius-lg);
	padding: 40px 34px;
	box-shadow: var(--hc-shadow-sm);
	border: 1px solid rgba(39,67,89,0.08);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

.form-field { margin-bottom: 20px; }
.form-field label { display: block; font-weight: 600; font-size: 0.9rem; color: var(--hc-navy); margin-bottom: 8px; font-family: var(--hc-font-heading); }
.form-field input,
.form-field textarea {
	width: 100%;
	padding: 14px 16px;
	border-radius: var(--hc-radius-sm);
	border: 1.5px solid rgba(39,67,89,0.15);
	background: var(--hc-bg-gray);
	color: var(--hc-text);
	transition: border-color 0.2s var(--hc-ease), background-color 0.2s var(--hc-ease);
}
.form-field input:focus,
.form-field textarea:focus {
	outline: none;
	border-color: var(--hc-teal);
	background: var(--hc-white);
}
.form-field textarea { resize: vertical; min-height: 140px; }
.hc-hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; }

.form-status { margin-top: 16px; padding: 14px 16px; border-radius: var(--hc-radius-sm); font-size: 0.92rem; display: none; }
.form-status.is-visible { display: block; }
.form-status.is-success { background: rgba(71,237,230,0.18); color: #146d67; }
.form-status.is-error { background: rgba(255,154,150,0.22); color: #a3312c; }

/* --------------------------------------------------------------------
   Blog: cards, pagination, single, sidebar
   -------------------------------------------------------------------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 980px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .post-grid { grid-template-columns: 1fr; } }

.post-card { background: var(--hc-white); border-radius: var(--hc-radius); overflow: hidden; border: 1px solid rgba(39,67,89,0.08); transition: transform 0.3s var(--hc-ease), box-shadow 0.3s var(--hc-ease); }
.post-card:hover { transform: translateY(-6px); box-shadow: var(--hc-shadow); }
.post-card .thumb { aspect-ratio: 16/10; background: linear-gradient(140deg, var(--hc-bg-peach), var(--hc-bg-gray)); overflow: hidden; }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card .body { padding: 24px; }
.post-card .meta { font-size: 0.8rem; color: var(--hc-text-soft); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
.post-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.post-card h3 a { color: var(--hc-navy); }
.post-card p { color: var(--hc-text-soft); font-size: 0.93rem; }

.hc-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 50px; }
.hc-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 999px; background: var(--hc-bg-gray); color: var(--hc-navy); font-weight: 600; }
.hc-pagination .page-numbers.current { background: var(--hc-navy); color: var(--hc-white); }
.hc-pagination .page-numbers:hover { background: var(--hc-coral); color: var(--hc-navy); }

.single-post-content { max-width: var(--hc-container-narrow); margin-inline: auto; }
.single-post-content .entry-header { margin-bottom: 32px; }
.single-post-content .entry-meta { color: var(--hc-text-soft); font-size: 0.9rem; margin-bottom: 14px; }
.single-post-content .entry-content { font-size: 1.05rem; }
.single-post-content .entry-content h2 { margin-top: 1.4em; }
.single-post-content .entry-content img { border-radius: var(--hc-radius); }
.single-post-content .entry-content blockquote { border-left: 4px solid var(--hc-coral); margin: 1.6em 0; padding: 0.4em 0 0.4em 1.4em; font-style: italic; color: var(--hc-text-soft); }

.widget { margin-bottom: 40px; }
.widget-title { font-size: 1.05rem; margin-bottom: 18px; }

.not-found-wrap { text-align: center; padding: 80px 0; }
.not-found-wrap .code { font-family: var(--hc-font-heading); font-weight: 800; font-size: clamp(4rem, 8vw, 7rem); color: var(--hc-navy); line-height: 1; margin-bottom: 12px; background: linear-gradient(120deg, var(--hc-navy), var(--hc-teal-dark)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* --------------------------------------------------------------------
   Nova Builder content wrapper — keeps builder-authored pages visually
   consistent with the rest of the site without fighting the builder's
   own inline styles/CSS custom properties.
   -------------------------------------------------------------------- */
.nova-content-wrap { }
.nova-content-wrap > .nova-row:first-child { margin-top: 0; }

/* Nova's own element CSS (frontend.css) handles layout/behaviour; these
   rules only adjust color/spacing so builder-authored pages match the
   hand-coded templates. Scoped to .nova-content-wrap so they never leak
   into non-builder pages. */
/* Nova's own .nova-heading rule sets `font-size: var(--nova-size-heading,
   inherit)` — with no global typography size configured (the theme only
   seeds font family/weight, not size), that resolves to `inherit`, and
   because a class selector always outranks the bare `h1`/`h2`/... rules
   in style.css, headings would otherwise render at their parent's font
   size instead of the sizes below. Tag+class selectors here match that
   specificity and win. */
.nova-content-wrap .nova-heading { margin-bottom: 0.6em; }
.nova-content-wrap h1.nova-heading { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.75rem); }
.nova-content-wrap h2.nova-heading { font-size: clamp(1.8rem, 1.5rem + 1.5vw, 2.75rem); }
.nova-content-wrap h3.nova-heading { font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem); }
.nova-content-wrap h4.nova-heading { font-size: 1.25rem; }
.nova-content-wrap .nova-text { color: var(--hc-text); }
.nova-content-wrap .nova-text p { color: var(--hc-text); }
.nova-content-wrap .nova-text ul { list-style: none; margin: 0; padding: 0; }

/* The generic rule above (0,2,1 specificity: .nova-content-wrap + .nova-text)
   outranks the plain .page-hero p / .cta-banner p rules (0,1,1 each)
   defined earlier in this file, regardless of source order — so on every
   Nova-rendered page-hero or cta-banner, paragraph text was silently
   winning back the dark body color instead of staying light on the navy
   background. These (0,3,1) overrides win instead. */
.nova-content-wrap .page-hero .nova-text p { color: rgba(255,255,255,0.78); }
.nova-content-wrap .cta-banner .nova-text p { color: rgba(255,255,255,0.75); }

.nova-content-wrap .nova-btn {
	font-family: var(--hc-font-heading);
	font-weight: 600;
	border-radius: 999px !important;
	padding: 15px 30px !important;
	transition: background-color 0.25s var(--hc-ease), color 0.25s var(--hc-ease), border-color 0.25s var(--hc-ease);
}
.nova-content-wrap .nova-btn--filled {
	background: var(--nova-btn-color, var(--hc-coral)) !important;
	color: var(--hc-navy) !important;
	border-color: transparent !important;
}
.nova-content-wrap .nova-btn--filled:hover { background: var(--hc-navy) !important; color: var(--hc-white) !important; }
.nova-content-wrap .nova-btn--outline {
	background: transparent !important;
	border: 2px solid var(--nova-btn-color, var(--hc-navy)) !important;
	color: var(--nova-btn-color, var(--hc-navy)) !important;
}
.nova-content-wrap .nova-btn--outline:hover { background: var(--hc-navy) !important; color: var(--hc-white) !important; border-color: var(--hc-navy) !important; }

.nova-content-wrap .nova-icon-box { text-align: inherit; }
.nova-content-wrap .nova-icon-box__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 54px; height: 54px; border-radius: 16px;
	background: var(--hc-bg-peach);
	margin-bottom: 18px;
}
.nova-content-wrap .nova-icon-box__title { font-family: var(--hc-font-heading); font-size: 1.15rem; color: var(--hc-navy); margin: 0 0 10px; }
.nova-content-wrap .nova-icon-box__text { color: var(--hc-text-soft); font-size: 0.97rem; margin: 0; }

/* nova_icon's own .nova-icon wrapper div styled directly as the colored
   "icon-wrap" square — see the note in demo-content-builders.php on why
   an actual wrapping container isn't used here. */
.nova-content-wrap .feature-card .nova-icon,
.nova-content-wrap .nova-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 16px;
	background: var(--hc-bg-peach);
	margin-bottom: 18px;
}
.nova-content-wrap .solution-card .nova-icon {
	width: 60px;
	height: 60px;
	border-radius: 18px;
	background: var(--hc-navy);
	margin-bottom: 22px;
}
.nova-content-wrap .value-item .nova-icon {
	width: 46px;
	height: 46px;
	border-radius: 14px;
	margin-bottom: 14px;
	flex-shrink: 0;
}

.nova-content-wrap .nova-counter__value { font-family: var(--hc-font-heading); font-weight: 800; font-size: clamp(2rem, 1.4vw + 1.6rem, 2.6rem); display: block; }
.nova-content-wrap .nova-counter__label { font-size: 0.9rem; opacity: 0.8; }
.nova-content-wrap .nova-counter { text-align: center; }
.nova-content-wrap .stat-on-navy .nova-counter__value,
.nova-content-wrap .stat-on-navy .nova-counter__label { color: var(--hc-white); }

/* Same idea as .stat-on-navy: nova_text has no color field, so a wrapping
   container class carries the "light text on dark background" styling. */
.nova-content-wrap .on-navy-text .eyebrow { background: rgba(255,255,255,0.12); color: var(--hc-teal); }
.nova-content-wrap .on-navy-text .nova-text p { color: rgba(255,255,255,0.75); }

.nova-content-wrap .nova-testimonial { background: var(--hc-white); border-radius: var(--hc-radius); padding: 32px 28px; box-shadow: var(--hc-shadow-sm); border: 1px solid rgba(39,67,89,0.06); height: 100%; }
.nova-content-wrap .nova-testimonial__stars { color: var(--hc-coral); margin-bottom: 14px; }
.nova-content-wrap .nova-testimonial__content { color: var(--hc-text); font-style: normal; }
.nova-content-wrap .nova-testimonial__author { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.nova-content-wrap .nova-testimonial__name { display: block; font-family: var(--hc-font-heading); }
.nova-content-wrap .nova-testimonial__role { font-size: 0.82rem; color: var(--hc-text-soft); }

.nova-content-wrap .nova-accordion__item { background: var(--hc-white); border: 1px solid rgba(39,67,89,0.1); border-radius: var(--hc-radius); overflow: hidden; margin-bottom: 14px; }
.nova-content-wrap .nova-accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; background: none; border: none; text-align: left; font-family: var(--hc-font-heading); font-weight: 600; font-size: 1.02rem; color: var(--hc-navy); cursor: pointer; }
/* Nova's own accordion icon is a pure-CSS "+"/"−" built from two
   ::before/::after bars (background: currentColor) that collapse to a
   minus on .is-open — recolor it via `color`, don't redeclare
   content/width/height on those pseudo-elements, or its own bars keep
   rendering underneath whatever gets added here and the icon doubles up. */
.nova-content-wrap .nova-accordion__icon { flex-shrink: 0; color: var(--hc-coral-dark); }
.nova-content-wrap .nova-accordion__panel { padding: 0 24px 22px; color: var(--hc-text-soft); }

/* Legal document pages (Privacy Policy, Refund Policy, Terms of Service):
   a single narrow reading column, since nova_row only offers boxed/full
   widths — this caps line length inside that boxed row instead. */
.nova-content-wrap .legal-content { max-width: 760px; margin-inline: auto; }
.nova-content-wrap .legal-content h2.nova-heading { margin-top: 40px; }
.nova-content-wrap .legal-content > *:first-child h2.nova-heading { margin-top: 0; }
.nova-content-wrap .legal-content .nova-text p { color: var(--hc-text-soft); line-height: 1.7; }
.nova-content-wrap .legal-content .nova-text a { color: var(--hc-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Cards composed from a nova_container carrying one of these custom
   classes (see the demo-content installer) reuse the exact same visual
   components as the hand-coded page templates. */
.nova-content-wrap .feature-card,
.nova-content-wrap .solution-card,
.nova-content-wrap .step-item,
.nova-content-wrap .value-item,
.nova-content-wrap .team-card,
.nova-content-wrap .price-card,
.nova-content-wrap .contact-info-card { height: auto; }
.nova-content-wrap .price-features li { position: relative; padding-left: 30px; }
.nova-content-wrap .price-features li::before { content: '\2713'; position: absolute; left: 0; top: 1px; color: var(--hc-teal-dark); font-weight: 700; }
.nova-content-wrap .price-features li.is-muted::before { content: '\2715'; color: var(--hc-text-soft); opacity: 0.5; }
.nova-content-wrap .price-card.is-featured .price-features li::before { color: var(--hc-teal); }
.nova-content-wrap .compare-table .yes { color: var(--hc-teal-dark); font-weight: 700; }
.nova-content-wrap .compare-table .no { color: #c7ced3; font-weight: 700; }

/* --------------------------------------------------------------------
   Misc utilities
   -------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }