/* =====================================================
Page-specific Styles — Capsule Homes Investment
===================================================== */
/* === Market Facts Section === */
/* === Market Facts Section === */
.market-facts {
background-color: #F5F7FA;
padding: var(--space-4xl) 0;
overflow: hidden;
}
/* Layout Wrapper - New 2-column grid */
.market-facts__layout {
display: grid;
grid-template-columns: 1fr 1fr;
/* Left (Text) | Right (Grid) */
gap: var(--space-3xl);
align-items: center;
padding-bottom: var(--space-xl);
}
/* Left Column: Content */
.market-facts__content {
text-align: left;
max-width: 600px;
}
.market-facts__title {
font-family: var(--font-heading);
font-size: clamp(2rem, 3vw, 3rem);
/* Reduced by ~25% */
font-weight: 800;
margin-bottom: var(--space-lg);
color: var(--color-text);
line-height: 1.15;
text-wrap: balance;
}
.market-facts__subtitle {
font-size: var(--text-xl);
color: var(--color-text-muted);
line-height: 1.6;
margin-bottom: var(--space-2xl);
max-width: 90%;
}
/* Right Column: 2x2 Grid */
.facts-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
}
/* Horizontal Card Layout */
.fact-card {
background: #FFFFFF;
border-radius: var(--radius-xl);
padding: var(--space-lg);
/* Reduced padding */
box-shadow: var(--shadow-card);
transition: var(--transition-base);
text-align: left;
height: 100%;
display: flex;
flex-direction: row;
/* Horizontal Layout */
align-items: flex-start;
/* Top align */
gap: var(--space-md);
}
.fact-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
/* Highlighted Card */
.fact-card--highlight {
border: 2px solid var(--color-accent);
background: linear-gradient(135deg, #fff 0%, #fff9e6 100%);
position: relative;
overflow: hidden;
}
.fact-card--highlight::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--color-accent);
}
.fact-card__icon {
flex-shrink: 0;
margin-bottom: 0;
/* No bottom margin in row layout */
color: var(--color-primary);
padding-top: 4px;
/* Slight visual alignment with number */
}
/* Wrapper for text content */
.fact-card__details {
display: flex;
flex-direction: column;
}
.fact-card__value {
font-family: var(--font-heading);
font-size: 2.5rem;
/* ~40px - Slightly smaller for horizontal */
font-weight: 800;
line-height: 1;
color: var(--color-primary);
margin-bottom: var(--space-xs);
letter-spacing: -1px;
}
.fact-card--highlight .fact-card__value {
color: var(--color-accent);
}
.fact-card__label {
font-weight: 700;
font-size: var(--text-sm);
margin-bottom: var(--space-xs);
color: var(--color-text);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.fact-card__desc {
color: var(--color-text-muted);
font-size: 0.8125rem;
/* 13px */
line-height: 1.4;
}
/* Footer (Trust Badge) */
.market-facts__footer {
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--text-sm);
color: var(--color-text-muted);
opacity: 0.8;
}
/* Coordinate Picker Tooltip */
.geo-map__picker-tooltip {
position: absolute;
background: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
pointer-events: none;
z-index: 9999;
display: none;
}
/* Responsive */
@media (max-width: 1024px) {
.market-facts__layout {
grid-template-columns: 1fr;
text-align: center;
gap: var(--space-2xl);
}
.market-facts__content {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.market-facts__title,
.market-facts__subtitle {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.market-facts__footer {
justify-content: center;
}
/* Keep horizontal cards even on tablet */
.fact-card {
padding: var(--space-xl);
}
}
@media (max-width: 768px) {
.market-facts {
padding: var(--space-2xl) 0;
}
.facts-grid {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.fact-card__value {
font-size: 2.5rem;
}
}
/* === Home Page === */
/* Features Grid */
.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-lg);
}
@media (max-width: 1024px) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.features-grid {
grid-template-columns: 1fr;
}
}
/* Card enhancements for features */
.card__icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-accent) 0%, #D4B87A 100%);
border-radius: var(--radius-lg);
margin-bottom: var(--space-md);
}
.card__icon svg {
width: 28px;
height: 28px;
color: var(--color-primary);
}
.card__title {
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: 700;
margin-bottom: var(--space-sm);
}
.card__text {
color: var(--color-text-muted);
line-height: 1.6;
}
/* Dark Section */
.section--dark {
background: var(--color-bg-dark);
color: var(--color-text-light);
}
/* CTA Block */
.cta-block {
text-align: center;
padding: var(--space-3xl) 0;
}
.cta-block__title {
font-family: var(--font-heading);
font-size: var(--text-4xl);
font-weight: 800;
margin-bottom: var(--space-md);
}
.cta-block__text {
font-size: var(--text-lg);
color: rgba(255, 255, 255, 0.7);
margin-bottom: var(--space-xl);
}
/* Stats Bar */
.stats-bar {
display: flex;
justify-content: center;
gap: var(--space-3xl);
padding: var(--space-2xl) 0;
background: var(--color-bg-alt);
}
.stats-bar__item {
text-align: center;
}
.stats-bar__value {
font-family: var(--font-heading);
font-size: var(--text-4xl);
font-weight: 800;
color: var(--color-primary);
}
.stats-bar__label {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin-top: var(--space-xs);
}
@media (max-width: 768px) {
.stats-bar {
flex-direction: column;
gap: var(--space-lg);
}
}
/* === How It Works Section === */
.steps-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-xl);
counter-reset: step;
}
.step {
position: relative;
text-align: center;
}
.step::before {
counter-increment: step;
content: counter(step);
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: var(--color-accent);
color: var(--color-primary);
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: 700;
border-radius: var(--radius-full);
margin: 0 auto var(--space-md);
}
.step__title {
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: 600;
margin-bottom: var(--space-xs);
}
.step__text {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
@media (max-width: 1024px) {
.steps-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.steps-grid {
grid-template-columns: 1fr;
}
}
/* === Gallery/Projects Section === */
.projects-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
}
.project-card {
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
aspect-ratio: 4/3;
}
.project-card__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-slow);
}
.project-card:hover .project-card__image {
transform: scale(1.05);
}
.project-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 50%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: var(--space-lg);
color: var(--color-text-light);
}
.project-card__title {
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: 700;
}
.project-card__location {
font-size: var(--text-sm);
opacity: 0.7;
}
@media (max-width: 768px) {
.projects-grid {
grid-template-columns: 1fr;
}
}
/* === Testimonials Section === */
.testimonial {
background: var(--color-bg);
border-radius: var(--radius-xl);
padding: var(--space-xl);
box-shadow: var(--shadow-card);
}
.testimonial__quote {
font-size: var(--text-lg);
font-style: italic;
line-height: 1.7;
margin-bottom: var(--space-lg);
}
.testimonial__author {
display: flex;
align-items: center;
gap: var(--space-md);
}
.testimonial__avatar {
width: 56px;
height: 56px;
border-radius: var(--radius-full);
object-fit: cover;
}
.testimonial__name {
font-family: var(--font-heading);
font-weight: 600;
}
.testimonial__role {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
/* === About Page === */
.about-hero {
padding-top: calc(var(--space-3xl) + 80px);
}
.about-content {
max-width: 800px;
}
.about-content p {
font-size: var(--text-lg);
line-height: 1.8;
margin-bottom: var(--space-lg);
}
/* === Contacts Page === */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
}
.contact-info {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.contact-item {
display: flex;
align-items: flex-start;
gap: var(--space-md);
}
.contact-item__icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-alt);
border-radius: var(--radius-lg);
flex-shrink: 0;
}
.contact-item__icon svg {
width: 24px;
height: 24px;
color: var(--color-accent);
}
.contact-item__label {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin-bottom: var(--space-xs);
}
.contact-item__value {
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: 600;
}
.contact-form {
background: var(--color-bg);
border-radius: var(--radius-xl);
padding: var(--space-xl);
box-shadow: var(--shadow-card);
}
@media (max-width: 768px) {
.contact-grid {
grid-template-columns: 1fr;
}
}
/* === Policy & Terms Pages === */
.legal-content {
max-width: 800px;
margin: 0 auto;
padding: var(--space-2xl) 0;
padding-top: calc(var(--space-2xl) + 80px);
}
.legal-content h1 {
margin-bottom: var(--space-xl);
}
.legal-content h2 {
font-size: var(--text-xl);
margin: var(--space-xl) 0 var(--space-md);
}
.legal-content p {
margin-bottom: var(--space-md);
color: var(--color-text-muted);
line-height: 1.7;
}
.legal-content ul {
margin: var(--space-md) 0;
padding-left: var(--space-lg);
}
/* === Product Showcase Section === */
.product-showcase {
background-color: var(--color-bg-dark);
padding: var(--space-3xl) 0;
/* Reduced from 4xl */
color: var(--color-text-light);
overflow: hidden;
}
/* Header */
.product-showcase__header {
text-align: center;
max-width: 800px;
margin: 0 auto 60px;
/* Explicit 60px spacing as requested (was 30px/lg) */
}
.product-showcase__title {
color: var(--color-text-light);
font-size: clamp(1.5rem, 5vw, 3.5rem);
/* Reduced min size from 2rem */
margin-bottom: var(--space-md);
text-transform: uppercase;
word-wrap: break-word;
hyphens: auto;
}
.product-showcase__subtitle {
color: rgba(255, 255, 255, 0.8);
font-size: var(--text-lg);
line-height: 1.6;
}
/* Hero Image & Hotspots */
.product-showcase__hero {
position: relative;
margin-bottom: var(--space-xl);
}
.product-showcase__image-wrapper {
position: relative;
max-width: 1000px;
margin: 0 auto;
}
.product-showcase__image {
width: 100%;
height: auto;
display: block;
/* Optional: drop shadow for depth */
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}
/* Hotspots */
.hotspot {
position: absolute;
width: 30px;
height: 30px;
transform: translate(-50%, -50%);
cursor: pointer;
z-index: 50;
/* Increased z-index */
pointer-events: auto;
/* Ensure clickable */
}
/* Expand touch target for mobile without changing visual size */
.hotspot::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 48px;
/* Min touch target */
height: 48px;
background: transparent;
z-index: 51;
}
.hotspot__dot {
width: 100%;
height: 100%;
background-color: var(--color-accent);
border-radius: 50%;
position: relative;
box-shadow: 0 0 0 0 rgba(255, 69, 0, 0.7);
animation: pulse-orange 2s infinite;
}
.hotspot__tooltip {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%) translateY(10px);
/* Default hidden state */
background-color: rgba(10, 25, 47, 0.95);
/* Deep Blue Background */
color: var(--color-text-light);
/* White Text */
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-sm);
width: 240px;
text-align: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
pointer-events: none;
z-index: 100;
border: 1px solid rgba(255, 171, 0, 0.2);
/* Subtle Amber Border */
backdrop-filter: blur(4px);
}
.hotspot__tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -6px;
border-width: 6px;
border-style: solid;
border-color: rgba(10, 25, 47, 0.95) transparent transparent transparent;
/* Match Background */
}
.hotspot__tooltip strong {
display: block;
color: var(--color-accent);
margin-bottom: 4px;
font-size: 0.9rem;
}
.hotspot__tooltip span {
font-size: 0.8rem;
line-height: 1.4;
display: block;
}
/* Show tooltip on Active state (Click) or Hover */
.hotspot.active .hotspot__tooltip,
.hotspot:hover .hotspot__tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* Hotspot 1 (Roof/Aluminum) — show tooltip above, centered on dot */
.hotspot--1 .hotspot__tooltip {
bottom: 40px;
left: 50%;
transform: translateX(-50%) translateY(10px);
}
.hotspot--1.active .hotspot__tooltip,
.hotspot--1:hover .hotspot__tooltip {
transform: translateX(-50%) translateY(0);
}
.hotspot--1 .hotspot__tooltip::after {
top: 100%;
left: 50%;
margin-left: -6px;
border-color: rgba(10, 25, 47, 0.95) transparent transparent transparent;
}
/* Hotspot 3 (Right edge) — shift tooltip left so it doesn't clip */
.hotspot--3 .hotspot__tooltip {
left: auto;
right: -20px;
transform: translateY(10px);
}
.hotspot--3.active .hotspot__tooltip,
.hotspot--3:hover .hotspot__tooltip {
transform: translateY(0);
}
.hotspot--3 .hotspot__tooltip::after {
left: auto;
right: 24px;
margin-left: 0;
}
@keyframes pulse-orange {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(255, 69, 0, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 15px rgba(255, 69, 0, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(255, 69, 0, 0);
}
}
/* Mobile Features List */
.product-showcase__mobile-features {
display: none;
/* Hidden on desktop */
margin-top: var(--space-xl);
list-style: none;
padding: 0;
}
.product-showcase__mobile-features li {
margin-bottom: var(--space-sm);
font-size: var(--text-base);
color: rgba(255, 255, 255, 0.9);
}
/* Comparison Grid */
.comparison-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-lg);
max-width: 100%;
/* Allow full width for 4 cards */
margin: 0 auto var(--space-4xl);
}
.comparison-grid--tinyhouse {
grid-template-columns: repeat(3, 1fr);
}
.comparison-card {
background: rgba(31, 41, 55, 0.3);
/* Darker glass base */
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-lg);
padding: var(--space-xl);
text-align: center;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.comparison-card:hover {
background: rgba(31, 41, 55, 0.5);
border-color: var(--color-accent);
box-shadow: 0 0 24px rgba(255, 171, 0, 0.25);
transform: translateY(-6px);
}
/* === Cards Grid (Duplicate removed) === */
/* Icons */
.card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-bottom: var(--space-md);
color: var(--color-accent);
/* Amber icons */
}
/* Typography & Layout */
.card-label {
display: block;
font-family: var(--font-body);
/* Inter */
font-size: 12px;
font-weight: 500;
letter-spacing: 1.5px;
color: var(--color-text-muted);
/* Gray */
text-transform: uppercase;
margin-bottom: var(--space-sm);
}
.card-values {
font-family: var(--font-heading);
/* Montserrat */
font-size: 18px;
font-weight: 600;
color: var(--color-text-light);
margin-top: 12px;
display: flex;
flex-direction: column;
/* Stack on small screens if needed, or keeping inline */
align-items: center;
gap: 4px;
}
/* Advantage / Disadvantage Styling */
.advantage {
color: var(--color-accent);
/* Amber for advantage */
font-weight: 600;
}
.divider {
color: var(--color-text-muted);
opacity: 0.5;
font-size: 0.9em;
margin: 4px 0;
/* Vertical spacing if stacked */
}
.disadvantage {
color: rgba(255, 255, 255, 0.6);
/* Light Gray */
font-weight: 400;
font-size: 0.95em;
}
/* CTA */
.product-showcase__cta {
text-align: center;
}
.product-showcase__micro-copy {
margin-top: var(--space-sm);
color: var(--color-text-muted);
font-size: var(--text-sm);
}
/* Responsive */
/* Mobile Slider Styles */
.product-showcase__mobile-slider {
display: none;
/* Hidden on desktop */
}
@media (max-width: 768px) {
/* Hide interactive hotspots on mobile */
.hotspot {
pointer-events: auto;
/* Enable interaction */
opacity: 0.9;
width: 24px;
/* Slightly larger for better visibility */
height: 24px;
}
/* Tiny House mobile declutter: spread hotspots + enlarge visual */
.product-showcase__hero--tinyhouse .product-showcase__image-wrapper {
max-width: 112%;
margin-left: -6%;
margin-right: -6%;
}
.product-showcase__hero--tinyhouse .product-showcase__image {
transform: scale(1.08);
transform-origin: center;
}
.product-showcase__hero--tinyhouse .hotspot {
width: 20px;
height: 20px;
}
.product-showcase__hero--tinyhouse .hotspot--1 { top: 46% !important; left: 80% !important; }
.product-showcase__hero--tinyhouse .hotspot--2 { top: 18% !important; left: 50% !important; }
.product-showcase__hero--tinyhouse .hotspot--3 { top: 43% !important; left: 62% !important; }
.product-showcase__hero--tinyhouse .hotspot--4 { top: 52% !important; left: 18% !important; }
.product-showcase__hero--tinyhouse .hotspot--5 { top: 66% !important; left: 86% !important; }
.hotspot__tooltip {
display: none !important;
/* Never show tooltips on mobile */
}
/* Hide the old static list */
.product-showcase__mobile-features {
display: none !important;
}
/* Show Mobile Slider */
.product-showcase__mobile-slider {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
/* Add horizontal padding for peek effect */
margin-top: 40px;
/* Space between image and cards */
padding-bottom: var(--space-lg);
/* Space for scrollbar if any */
position: relative;
z-index: 10;
-webkit-overflow-scrolling: touch;
/* Smooth scroll on iOS */
}
/* Hide scrollbar for cleaner look */
.product-showcase__mobile-slider::-webkit-scrollbar {
display: none;
}
.feature-card {
flex: 0 0 85%;
/* Card width */
scroll-snap-align: center;
background-color: rgba(10, 25, 47, 0.85);
/* Dark Blue */
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 171, 0, 0.2);
border-radius: var(--radius-md);
padding: var(--space-md);
color: var(--color-text-light);
display: flex;
align-items: flex-start;
gap: var(--space-sm);
transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.feature-card__icon {
font-size: 1.5rem;
line-height: 1;
}
/* Active state for card (to be toggled via JS intersection observer) */
.feature-card.active {
opacity: 1;
transform: scale(1);
border-color: var(--color-accent);
}
/* Mobile Slider Pagination */
.slider-pagination {
display: flex;
justify-content: center;
gap: var(--space-sm);
margin-top: var(--space-md);
padding-bottom: var(--space-md);
}
.slider-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: all 0.3s ease;
}
.slider-dot.active {
background: var(--color-accent);
transform: scale(1.3);
box-shadow: 0 0 10px rgba(255, 166, 0, 0.4);
}
.feature-card__content strong {
display: block;
color: var(--color-accent);
/* Amber */
margin-bottom: 4px;
font-size: 1rem;
}
.feature-card__content p {
font-size: 0.9rem;
line-height: 1.4;
margin: 0;
color: rgba(255, 255, 255, 0.9);
}
/* Active state for card (to be toggled via JS intersection observer) */
.feature-card.active {
border-color: var(--color-accent);
background-color: rgba(10, 25, 47, 0.98);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.comparison-grid {
grid-template-columns: 1fr;
gap: var(--space-md);
padding: 0 var(--space-md);
}
/* Mobile Hotspot Highlight */
.hotspot.mobile-highlight .hotspot__dot {
background-color: #fff;
transform: scale(1.4);
box-shadow: 0 0 20px rgba(255, 171, 0, 1);
animation: none;
/* Stop pulsing, just stay bright */
border: 2px solid var(--color-accent);
}
/* === Section 4: Investment Models — ≤480px overrides === */
.invest-models__grid {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.invest-models__title {
font-size: clamp(1.5rem, 5vw, 2rem);
}
.invest-card--featured {
transform: none;
}
.exit-strategy__grid {
grid-template-columns: 1fr;
}
}
/* =====================================================
Section 4: Investment Models — Premium Dark Theme
===================================================== */
.invest-models {
position: relative;
background: linear-gradient(175deg, #0A192F 0%, #0D1F3C 40%, #0A192F 100%);
padding: var(--space-4xl) 0 calc(var(--space-4xl) + 2rem);
overflow: hidden;
color: var(--color-text-light);
}
/* Ambient glow orbs */
.invest-models__glow {
position: absolute;
border-radius: 50%;
filter: blur(120px);
pointer-events: none;
z-index: 0;
}
.invest-models__glow--1 {
width: 500px;
height: 500px;
background: rgba(255, 171, 0, 0.06);
top: -100px;
right: -150px;
}
.invest-models__glow--2 {
width: 400px;
height: 400px;
background: rgba(59, 130, 246, 0.05);
bottom: -100px;
left: -100px;
}
.invest-models .container {
position: relative;
z-index: 1;
}
/* === Eyebrow + Header === */
.invest-models__eyebrow {
display: inline-block;
font-family: var(--font-body);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 600;
color: var(--color-primary);
margin-bottom: var(--space-md);
padding: 6px 16px;
background: rgba(255, 171, 0, 0.08);
border: 1px solid rgba(255, 171, 0, 0.15);
border-radius: var(--radius-full);
}
.invest-models__header {
text-align: center;
max-width: 750px;
margin: 0 auto var(--space-3xl);
}
.invest-models__title {
font-family: var(--font-heading);
font-size: clamp(2rem, 3.5vw, 3rem);
font-weight: 800;
color: #fff;
line-height: 1.15;
margin-bottom: var(--space-lg);
}
.invest-models__intro {
font-size: var(--text-lg);
color: rgba(255, 255, 255, 0.6);
line-height: 1.7;
max-width: 85%;
margin: 0 auto;
}
/* === Cards Grid === */
.invest-models__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
margin-bottom: var(--space-3xl);
align-items: stretch;
}
/* === Individual Card === */
.invest-card {
position: relative;
border-radius: var(--radius-xl);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.invest-card__glow {
position: absolute;
inset: -1px;
border-radius: var(--radius-xl);
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.02) 50%,
rgba(255, 255, 255, 0.05) 100%);
z-index: 0;
pointer-events: none;
}
.invest-card__inner {
position: relative;
z-index: 1;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-xl);
padding: var(--space-xl) var(--space-lg);
display: flex;
flex-direction: column;
flex: 1;
transition: all 0.3s ease;
}
.invest-card:hover {
transform: translateY(-6px);
box-shadow: 0 0 24px rgba(255, 255, 255, 0.08);
}
.invest-card:hover .invest-card__inner {
border-color: rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.06);
}
/* === Featured card (Revenue Share) === */
.invest-card--featured {
transform: translateY(-12px);
}
.invest-card--featured .invest-card__glow,
.invest-card--featured .invest-card__glow--featured {
background: linear-gradient(135deg,
rgba(255, 171, 0, 0.15) 0%,
rgba(255, 171, 0, 0.03) 50%,
rgba(255, 171, 0, 0.10) 100%);
}
.invest-card--featured .invest-card__inner {
border-color: rgba(255, 171, 0, 0.25);
background: rgba(255, 171, 0, 0.04);
}
.invest-card--featured:hover {
transform: translateY(-12px);
box-shadow: 0 0 24px rgba(255, 171, 0, 0.25);
}
.invest-card--featured:hover .invest-card__inner {
border-color: rgba(255, 171, 0, 0.35);
background: rgba(255, 171, 0, 0.06);
}
/* Popular label */
.invest-card__popular {
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #FFAB00, #FF8F00);
color: #000;
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.7rem;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 7px 20px;
border-radius: var(--radius-full);
white-space: nowrap;
display: flex;
align-items: center;
gap: 5px;
z-index: 5;
box-shadow: 0 4px 16px rgba(255, 171, 0, 0.3);
}
.invest-card__popular i {
width: 14px;
height: 14px;
}
/* Price Tag */
.invest-card__price-tag {
display: flex;
align-items: baseline;
gap: 4px;
margin-bottom: var(--space-md);
}
.invest-card__price-from {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.4);
font-weight: 400;
}
.invest-card__price-num {
font-family: var(--font-heading);
font-size: clamp(1.8rem, 2.5vw, 2.4rem);
font-weight: 800;
color: #fff;
letter-spacing: -0.02em;
}
.invest-card__price-tag--accent .invest-card__price-num {
color: var(--color-primary);
}
/* Card Header */
.invest-card__header {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-md);
}
.invest-card__icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: rgba(255, 255, 255, 0.7);
}
.invest-card__icon--accent {
background: rgba(255, 171, 0, 0.1);
border-color: rgba(255, 171, 0, 0.2);
color: var(--color-primary);
}
.invest-card__icon svg,
.invest-card__icon i {
width: 20px;
height: 20px;
}
.invest-card__title {
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: 700;
color: #fff;
line-height: 1.3;
}
.invest-card__subtitle {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255, 255, 255, 0.35);
font-weight: 500;
}
/* Card description */
.invest-card__desc {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.5);
line-height: 1.65;
margin-bottom: var(--space-lg);
}
/* Feature list */
.invest-card__features {
list-style: none;
padding: 0;
margin: 0 0 var(--space-lg);
display: flex;
flex-direction: column;
gap: 10px;
}
.invest-card__features li {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.75);
line-height: 1.4;
}
.invest-card__feature-icon {
width: 28px;
height: 28px;
border-radius: 8px;
background: rgba(255, 171, 0, 0.08);
border: 1px solid rgba(255, 171, 0, 0.12);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--color-primary);
}
.invest-card__feature-icon i {
width: 14px;
height: 14px;
}
.invest-card__features li strong {
font-weight: 700;
color: #fff;
}
/* === Circular SVG Donut Metrics === */
.invest-card__metrics {
margin-top: auto;
padding-top: var(--space-md);
border-top: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
gap: var(--space-lg);
margin-bottom: var(--space-md);
}
.metric {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
}
.metric__ring {
width: 52px;
height: 52px;
flex-shrink: 0;
transform: rotate(-90deg);
}
.metric__ring-bg {
fill: none;
stroke: rgba(255, 255, 255, 0.06);
stroke-width: 4;
}
.metric__ring-fill {
fill: none;
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: calc(188.4 * var(--metric-pct) / 100) 188.4;
transition: stroke-dasharray 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.metric__ring-fill--income {
stroke: var(--color-primary);
}
.metric__ring-fill--risk {
stroke: #4ade80;
}
.metric__info {
display: flex;
flex-direction: column;
gap: 2px;
}
.metric__value {
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: 700;
color: #fff;
}
.metric__label {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.4);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Badge */
.invest-card__badge {
text-align: center;
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.5);
padding: 8px 16px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius-full);
letter-spacing: 0.02em;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.invest-card__badge i {
width: 14px;
height: 14px;
}
.invest-card__badge--accent {
background: rgba(255, 171, 0, 0.08);
border-color: rgba(255, 171, 0, 0.15);
color: var(--color-primary);
}
/* ============/* AI Management Block */
.ai-management {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-xl);
padding: var(--space-xl);
margin-top: var(--space-3xl);
margin-bottom: var(--space-3xl);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2xl);
position: relative;
overflow: hidden;
}
.ai-management::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
opacity: 0.5;
}
.ai-management__content {
display: flex;
align-items: flex-start;
gap: var(--space-lg);
max-width: 60%;
}
.ai-management__icon {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(255, 166, 0, 0.1);
color: var(--color-accent);
display: flex;
align-items: center;
justify-content: center;
}
.ai-management__text h3 {
font-size: 1.25rem;
margin-bottom: var(--space-xs);
color: #ffffff;
}
.ai-management__desc {
font-size: 0.9375rem;
color: rgba(255, 255, 255, 0.7);
line-height: 1.5;
}
.ai-management__metrics {
display: flex;
align-items: center;
gap: var(--space-xl);
background: rgba(0, 0, 0, 0.2);
padding: var(--space-md) var(--space-xl);
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.ai-metric {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.ai-metric__val {
font-size: 1.125rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 2px;
display: block;
}
.ai-metric__label {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 1px;
}
.ai-metric__divider {
width: 1px;
height: 32px;
background: rgba(255, 255, 255, 0.1);
}
@media (max-width: 768px) {
.ai-management {
flex-direction: column;
padding: var(--space-lg);
gap: var(--space-lg);
}
.ai-management__content {
max-width: 100%;
flex-direction: column;
align-items: flex-start;
/* Icon overlapping text fix */
gap: var(--space-md);
}
.ai-management__icon {
margin-bottom: var(--space-xs);
}
.ai-management__text {
text-align: left;
}
.ai-management__metrics {
width: 100%;
flex-direction: column;
gap: var(--space-md);
padding: 0;
/* Remove padding to align with edge or keep it? generic padding is ok */
background: transparent;
/* Remove dark box background if wanted, or keep? User said "blocks look bad". Let's keep bg but clean internals. */
border: none;
}
.ai-metric {
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--space-md);
background: rgba(255, 255, 255, 0.05);
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.1);
width: 100%;
}
.ai-metric__val {
font-size: 1rem;
margin-bottom: 0;
text-align: left;
color: var(--color-accent);
/* Make it look like a feature highlight */
margin-right: var(--space-sm);
}
.ai-metric__label {
font-size: 0.9rem;
text-align: left;
color: rgba(255, 255, 255, 0.8);
text-transform: none;
/* easier to read */
letter-spacing: 0;
}
/* Hide divider on mobile */
.ai-metric__divider {
display: none;
}
}
/* Locations WOW Section - Luxury Aesthetic */
.locations-wow {
padding: var(--space-4xl) 0;
background: radial-gradient(circle at 50% 10%, #1a1e2e 0%, #0b0b14 60%);
position: relative;
overflow: hidden;
}
.locations-wow::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: url('data:image/svg+xml;utf8,');
}
.locations-wow__eyebrow {
display: inline-block;
color: var(--color-accent);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: var(--space-sm);
}
.locations-wow__title {
font-family: var(--font-heading);
font-size: clamp(2.5rem, 5vw, 4.5rem);
font-weight: 800;
margin-bottom: var(--space-md);
letter-spacing: -0.03em;
line-height: 1.05;
color: var(--color-text-light);
}
.locations-wow__subtitle {
font-size: clamp(1rem, 1.5vw, 1.25rem);
color: rgba(255, 255, 255, 0.55);
max-width: none;
line-height: 1.7;
}
.locations-wow__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2xl);
margin-bottom: var(--space-md);
padding-bottom: 0;
position: relative;
z-index: 2;
}
.locations-wow__header-left {
flex: 1;
min-width: 0;
}
.locations-wow__header-right {
display: flex;
flex-direction: column;
gap: 12px;
flex-shrink: 0;
}
/* Stats Row — kept for backward compat */
.locations-wow__stats {
display: flex;
gap: var(--space-sm);
margin-top: var(--space-lg);
flex-wrap: wrap;
justify-content: center;
}
.stat-pill {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 36px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-full);
font-size: 0.95rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
letter-spacing: 0.08em;
text-transform: uppercase;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
white-space: nowrap;
transition: border-color 0.3s ease, background 0.3s ease;
}
.stat-pill:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
}
.stat-pill__dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-accent);
flex-shrink: 0;
}
.stat-pill strong {
color: var(--color-accent);
font-weight: 700;
}
.stat-pill--accent {
border-color: rgba(255, 171, 0, 0.35);
color: var(--color-accent);
}
.stat-pill--accent .stat-pill__dot {
box-shadow: 0 0 8px rgba(255, 171, 0, 0.5);
}
@media (max-width: 768px) {
.locations-wow__header {
flex-direction: column;
gap: var(--space-lg);
}
.locations-wow__header-right {
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
}
.stat-pill {
padding: 10px 20px;
font-size: 0.75rem;
}
}
.locations-wow__grid {
display: grid;
/* Asymmetrical grid for dynamic layout */
grid-template-columns: 1.4fr 1fr;
gap: var(--space-xl);
margin-bottom: var(--space-4xl);
position: relative;
z-index: 2;
}
@media (max-width: 1024px) {
.locations-wow__grid {
grid-template-columns: 1fr;
}
}
.loc-card {
position: relative;
border-radius: var(--radius-2xl);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
cursor: default;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.loc-card--featured {
min-height: 550px;
}
.loc-card--secondary {
min-height: 100%;
}
@media (max-width: 1024px) {
.loc-card--secondary {
min-height: 450px;
}
}
.loc-card__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
z-index: 0;
}
.loc-card:hover .loc-card__bg {
transform: scale(1.08);
}
.loc-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.1) 100%);
z-index: 1;
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.loc-card:hover .loc-card__overlay {
background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.3) 100%);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.loc-card__content {
position: relative;
z-index: 2;
padding: var(--space-2xl);
transform: translateY(40px);
transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.loc-card:hover .loc-card__content {
transform: translateY(0);
}
@media (max-width: 768px) {
.loc-card__content {
transform: translateY(0);
padding: var(--space-xl);
}
}
.loc-card__badge-group {
display: flex;
gap: var(--space-xs);
margin-bottom: var(--space-md);
flex-wrap: wrap;
}
.loc-card__badge,
.loc-card__badge-icon {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 100px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-light);
}
.loc-card__badge-icon i {
width: 14px;
height: 14px;
color: var(--color-accent);
}
.loc-card__badge--accent {
background: rgba(212, 184, 122, 0.15);
border-color: rgba(212, 184, 122, 0.4);
color: var(--color-accent);
}
.loc-card__title {
font-family: var(--font-heading);
font-size: var(--text-3xl);
font-weight: 800;
margin-bottom: var(--space-xs);
color: var(--color-text-light);
line-height: 1.1;
}
.loc-card--secondary .loc-card__title {
font-size: var(--text-2xl);
}
.loc-card__desc {
font-size: 1rem;
color: rgba(255, 255, 255, 0.75);
line-height: 1.6;
margin-bottom: var(--space-lg);
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.3s ease;
}
.loc-card:hover .loc-card__desc {
color: rgba(255, 255, 255, 0.9);
}
.loc-card__metrics {
display: flex;
gap: var(--space-md);
opacity: 0;
transform: translateY(20px);
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.1s;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: var(--space-md);
}
.loc-card:hover .loc-card__metrics {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 768px) {
.loc-card__metrics {
opacity: 1;
transform: translateY(0);
}
}
/* CTA Link in Card */
.loc-card__cta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: var(--space-md);
padding: 10px 24px;
background: rgba(255, 171, 0, 0.12);
border: 1px solid rgba(255, 171, 0, 0.3);
border-radius: var(--radius-full);
color: var(--color-accent);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
opacity: 0;
transform: translateY(10px);
transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0.15s;
}
.loc-card:hover .loc-card__cta {
opacity: 1;
transform: translateY(0);
}
.loc-card__cta:hover {
background: rgba(255, 171, 0, 0.2);
border-color: var(--color-accent);
}
@media (max-width: 768px) {
.loc-card__cta {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================
Interactive Contour Map of Georgia
============================================ */
/* === Geo Section 2-Column Layout === */
.geo-section-layout {
display: grid;
grid-template-columns: 1fr 3.5fr;
gap: var(--space-xl);
align-items: flex-start;
position: relative;
z-index: 2;
margin-top: 56px;
margin-bottom: var(--space-xl);
}
@media (max-width: 1200px) {
.geo-section-layout {
grid-template-columns: 1fr 2.5fr;
}
}
@media (max-width: 1024px) {
.geo-section-layout {
grid-template-columns: 1fr;
gap: var(--space-xl);
margin-top: 32px;
}
}
.geo-map {
position: relative;
z-index: 2;
margin: -100px 0 0 0; /* Aligned with top stats card, avoids header overlap */
padding: 0;
max-width: 100%;
}
.geo-map__svg {
width: 100%;
height: auto;
display: block;
overflow: visible; /* Prevent stroke clipping */
}
/* Georgia map contour drawing animation */
.geo-map__outline-path {
stroke-dasharray: 4500;
stroke-dashoffset: 4500;
stroke: rgba(255, 255, 255, 0.30); /* Softer, muted contour */
stroke-width: 1;
filter: blur(0.8px); /* Smooth, diffused line */
transition: stroke-dashoffset 4s cubic-bezier(0.4, 0, 0.2, 1);
}
.is-animating .geo-map__outline-path {
stroke-dashoffset: 0;
}
.geo-map__outline-inner {
opacity: 0;
animation: fadeInMap 1s ease forwards;
animation-delay: 1.5s;
}
@keyframes drawMap {
to {
stroke-dashoffset: 0;
}
}
/* ---- Map Hotspot Markers ---- */
.map-hotspot {
position: absolute;
width: 24px;
height: 24px;
transform: translate(-50%, -50%);
margin-top: 30px; /* Shift hotspots down globally */
z-index: 10;
/* Sequential animation: visible by default, hidden by --hidden modifier */
}
/* Hidden state — start invisible, reveal after map drawing completes */
.map-hotspot--hidden {
opacity: 0;
pointer-events: none;
}
.map-hotspot--hidden .hotspot__dot {
transform: scale(0);
}
.map-hotspot--hidden .map-hotspot__tooltip {
opacity: 0;
transform: translateY(8px);
}
/* Revealed state — applied by JS after map animation ends */
.map-hotspot--revealed {
opacity: 1;
pointer-events: auto;
transition: opacity 0.6s ease;
}
.map-hotspot--revealed .hotspot__dot {
transform: scale(1);
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.map-hotspot--revealed .map-hotspot__tooltip {
opacity: 1;
transform: translateY(0);
transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}
.map-hotspot .hotspot__dot {
width: 14px;
height: 14px;
background: var(--color-accent);
border-radius: 50%;
margin: 0 auto;
position: relative;
z-index: 2;
box-shadow: 0 0 10px rgba(255, 171, 0, 0.4);
}
.map-hotspot__tooltip {
position: absolute;
bottom: calc(100% + 4px);
left: 8px;
transform: none;
background-color: rgba(10, 20, 40, 0.92);
color: var(--color-text-light);
padding: 8px 14px;
border-radius: 6px;
width: max-content;
max-width: 320px;
text-align: center;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
pointer-events: none;
z-index: 100;
border: 1px solid rgba(255, 171, 0, 0.15);
backdrop-filter: blur(8px);
/* Always visible in revealed state */
opacity: 1;
visibility: visible;
}
.map-hotspot__tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 10px;
border-width: 6px;
border-style: solid;
border-color: rgba(10, 20, 40, 0.92) transparent transparent transparent;
}
.map-hotspot__tooltip strong {
display: inline;
color: var(--color-accent);
font-size: 0.82rem;
font-weight: 700;
}
.map-hotspot__tooltip p {
margin: 0;
display: inline;
font-size: 0.78rem;
line-height: 1.4;
color: rgba(255, 255, 255, 0.7);
}
/* Separator dot between title and description */
.map-hotspot__tooltip strong::after {
content: ' · ';
color: rgba(255, 255, 255, 0.35);
font-weight: 400;
}
/* Saguramo tooltip — positioned right-above like the base tooltip */
.map-hotspot--saguramo .map-hotspot__tooltip {
left: 8px;
right: auto;
transform: none;
width: max-content;
max-width: 320px;
}
.map-hotspot--saguramo .map-hotspot__tooltip::after {
left: 10px;
right: auto;
margin-left: 0;
}
@media (max-width: 768px) {
.map-hotspot {
width: 18px;
height: 18px;
}
.map-hotspot__tooltip {
min-width: 160px;
padding: 8px 12px;
font-size: 0.7rem;
}
.map-hotspot__tooltip strong {
font-size: 0.75rem;
}
.map-hotspot__tooltip span {
font-size: 0.65rem;
}
}
/* === Map Airport Labels (Subtle, Contour-Level) === */
.map-airport {
position: absolute;
display: flex;
align-items: center;
gap: 8px;
transform: translateY(-50%); /* Anchor from left edge, center vertically */
z-index: 5;
pointer-events: none;
}
.map-airport__icon {
font-size: 0.65rem;
color: rgba(255, 255, 255, 0.45); /* Dimmed to match map contour subtlety */
line-height: 1;
}
.map-airport__label {
font-family: var(--font-body);
font-size: 0.55rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.45); /* Dimmed to match map contour subtlety */
letter-spacing: 0.03em;
white-space: nowrap;
}
.map-airport--hidden {
opacity: 0;
}
.map-airport--revealed {
opacity: 1;
transition: opacity 0.6s ease-out; /* Faster reveal */
}
@media (max-width: 768px) {
.map-airport__label {
font-size: 0.35rem;
}
.map-airport__icon {
font-size: 0.4rem;
}
}
/* === Dev Helper: Coordinate Picker Tooltip === */
.geo-map__picker-tooltip {
position: absolute;
z-index: 9999;
background: rgba(15, 18, 30, 0.95);
color: var(--color-accent);
padding: 8px 14px;
border-radius: var(--radius-sm);
font-family: monospace;
font-size: 13px;
pointer-events: none;
border: 1px solid rgba(255, 171, 0, 0.3);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
display: none;
}
/* === Geo Stat Cards (Left Column) === */
.geo-stats {
display: flex;
flex-direction: column;
gap: 12px;
}
.geo-stat-card {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 20px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-lg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
cursor: default;
position: relative;
overflow: hidden;
}
.geo-stat-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 171, 0, 0.03) 0%, transparent 60%);
opacity: 0;
transition: opacity 0.35s ease;
}
.geo-stat-card:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.15);
transform: translateX(6px);
box-shadow:
0 4px 24px rgba(0, 0, 0, 0.2),
0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}
.geo-stat-card:hover::before {
opacity: 1;
}
/* Accent variant (ROI card) */
.geo-stat-card--accent {
border-color: rgba(255, 171, 0, 0.2);
background: rgba(255, 171, 0, 0.06);
}
.geo-stat-card--accent:hover {
border-color: rgba(255, 171, 0, 0.35);
background: rgba(255, 171, 0, 0.1);
box-shadow:
0 4px 24px rgba(255, 171, 0, 0.12),
0 0 0 1px rgba(255, 171, 0, 0.1) inset;
}
.geo-stat-card__icon {
flex-shrink: 0;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 171, 0, 0.1);
border-radius: var(--radius-md);
color: var(--color-accent);
transition: all 0.3s ease;
}
.geo-stat-card__icon svg,
.geo-stat-card__icon i {
width: 18px;
height: 18px;
}
.geo-stat-card:hover .geo-stat-card__icon {
background: rgba(255, 171, 0, 0.18);
box-shadow: 0 0 16px rgba(255, 171, 0, 0.15);
}
.geo-stat-card__body {
display: flex;
flex-direction: column;
min-width: 0;
}
.geo-stat-card__value {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 800;
color: var(--color-text-light);
line-height: 1.1;
letter-spacing: -0.02em;
}
.geo-stat-card--accent .geo-stat-card__value {
color: var(--color-accent);
}
.geo-stat-card__label {
font-size: 0.75rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 1px;
}
.geo-stat-card__desc {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.35);
line-height: 1.3;
margin-top: 3px;
}
/* Mobile: geo-stats */
@media (max-width: 1024px) {
.geo-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
}
@media (max-width: 640px) {
.geo-stats {
grid-template-columns: 1fr;
}
.geo-stat-card {
padding: 16px 18px;
}
.geo-stat-card__value {
font-size: 1.3rem;
}
.geo-stat-card__icon {
width: 38px;
height: 38px;
}
.geo-stat-card__icon svg,
.geo-stat-card__icon i {
width: 18px;
height: 18px;
}
}
@keyframes fadeInMap {
to {
opacity: 1;
}
}
/* Sea label */
.geo-map__sea-label {
font-family: var(--font-body);
font-size: 11px;
font-style: italic;
fill: rgba(255, 255, 255, 0.15);
letter-spacing: 0.15em;
}
/* City labels */
.geo-map__city-label {
font-family: var(--font-body);
font-size: 11px;
fill: rgba(255, 255, 255, 0.35);
letter-spacing: 0.05em;
}
.geo-map__city--tbilisi .geo-map__city-label {
font-weight: 600;
font-size: 12px;
fill: rgba(255, 255, 255, 0.5);
}
/* Marker pulse animation */
.geo-map__pulse {
transform-origin: center;
opacity: 0;
}
.geo-map__pulse--1 {
animation: mapPulse1 2.5s ease-out infinite;
}
.geo-map__pulse--2 {
animation: mapPulse2 2.5s ease-out infinite;
animation-delay: 0.4s;
}
@keyframes mapPulse1 {
0% {
transform: scale(0.5);
opacity: 0.7;
}
100% {
transform: scale(2.2);
opacity: 0;
}
}
@keyframes mapPulse2 {
0% {
transform: scale(0.6);
opacity: 0.5;
}
100% {
transform: scale(1.8);
opacity: 0;
}
}
/* Core dot hover effect */
.geo-map__marker {
cursor: pointer;
transition: transform 0.3s ease;
}
.geo-map__dot {
transition: r 0.3s ease, stroke-width 0.3s ease;
}
.geo-map__marker:hover .geo-map__dot {
r: 8;
stroke-width: 3;
}
/* Connection line animation */
.geo-map__connection {
stroke-dasharray: 6 4;
animation: dashMove 20s linear infinite;
}
@keyframes dashMove {
to {
stroke-dashoffset: -200;
}
}
/* ---- Tooltip Styles ---- */
.geo-map__tooltip {
position: absolute;
z-index: 10;
background: rgba(10, 20, 40, 0.92); /* Deep navy, slightly translucent */
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 171, 0, 0.15); /* Subtle thin amber border */
border-radius: 6px;
padding: 8px 14px;
width: max-content;
max-width: 320px;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.35s ease, transform 0.35s ease;
pointer-events: none;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.geo-map__tooltip.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* Nokalakevi tooltip positioning (left side of map) */
.geo-map__tooltip--nokalakevi {
left: 18%;
top: 15%;
}
/* Saguramo tooltip positioning (right side of map) */
.geo-map__tooltip--saguramo {
right: 18%;
top: 15%;
}
.geo-map__tooltip-badge {
display: inline-block;
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-accent);
background: rgba(255, 171, 0, 0.1);
border: 1px solid rgba(255, 171, 0, 0.2);
border-radius: var(--radius-full);
padding: 4px 12px;
margin-bottom: 10px;
}
.geo-map__tooltip-badge--active {
color: #4ade80;
background: rgba(74, 222, 128, 0.1);
border-color: rgba(74, 222, 128, 0.2);
}
.geo-map__tooltip strong {
display: inline;
font-family: var(--font-heading);
font-size: 0.82rem;
font-weight: 700;
color: var(--color-accent);
line-height: 1.3;
}
/* Separator dot between title and description */
.geo-map__tooltip strong::after {
content: ' · ';
color: rgba(255, 255, 255, 0.35);
font-weight: 400;
}
.geo-map__tooltip p {
margin: 0;
display: inline;
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.7);
line-height: 1.4;
}
.geo-map__tooltip-metrics {
display: flex;
gap: 20px;
margin-bottom: 10px;
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.geo-map__tooltip-metric {
display: flex;
flex-direction: column;
gap: 2px;
}
.geo-map__tooltip-val {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 800;
color: var(--color-accent);
}
.geo-map__tooltip-label {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.45);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.geo-map__tooltip-status {
display: block;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.55);
margin-top: 4px;
}
/* ---- Responsive ---- */
@media (max-width: 768px) {
.geo-map__container {
padding: var(--space-md) var(--space-sm);
}
.geo-map__tooltip--nokalakevi {
left: 5%;
top: 5%;
}
.geo-map__tooltip--saguramo {
right: 5%;
top: auto;
bottom: 5%;
}
.geo-map__tooltip {
min-width: 160px;
padding: 12px 14px;
}
.geo-map__tooltip-title {
font-size: 0.875rem;
}
.geo-map__tooltip-val {
font-size: 0.875rem;
}
}
@media (max-width: 480px) {
.geo-map__tooltip--nokalakevi,
.geo-map__tooltip--saguramo {
position: relative;
left: auto;
right: auto;
top: auto;
bottom: auto;
opacity: 1;
transform: none;
pointer-events: auto;
margin-top: var(--space-sm);
width: 100%;
}
}
/* ============================================
Tourism Revenue Chart
============================================ */
.tourism-chart {
position: relative;
z-index: 2;
padding: var(--space-xl) 0 var(--space-2xl);
}
.tourism-chart__title {
font-family: var(--font-heading);
font-size: clamp(1.8rem, 4vw, 3rem);
font-weight: 800;
color: var(--color-text-light);
line-height: 1.2;
text-transform: uppercase;
letter-spacing: -0.01em;
margin-bottom: var(--space-2xl);
max-width: 100%;
}
.tourism-chart__bars {
display: flex;
align-items: flex-end;
gap: clamp(12px, 2vw, 24px);
height: 480px;
padding-top: 40px;
}
.tourism-chart__bar {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
justify-content: flex-end;
}
.tourism-chart__bar-col {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
height: var(--bar-height);
min-height: 60px;
position: relative;
}
.tourism-chart__value {
font-family: var(--font-heading);
font-size: clamp(1.1rem, 2vw, 1.75rem);
font-weight: 800;
color: var(--color-text-light);
white-space: nowrap;
margin-bottom: 8px;
flex-shrink: 0;
}
.tourism-chart__value small {
font-size: 0.55em;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
vertical-align: super;
margin-left: 2px;
}
.tourism-chart__bar-fill {
flex: 1;
width: 100%;
background: linear-gradient(to top, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.15));
border-radius: 8px 8px 4px 4px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: none;
position: relative;
min-height: 20px;
transition: background 0.3s ease;
}
.tourism-chart__bar:hover .tourism-chart__bar-fill {
background: linear-gradient(to top, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.22));
}
.tourism-chart__bar-fill--accent {
background: linear-gradient(to top, rgba(255, 171, 0, 0.15), rgba(255, 171, 0, 0.35));
border-color: rgba(255, 171, 0, 0.3);
}
.tourism-chart__bar:hover .tourism-chart__bar-fill--accent {
background: linear-gradient(to top, rgba(255, 171, 0, 0.2), rgba(255, 171, 0, 0.45));
}
.tourism-chart__year {
font-family: var(--font-heading);
font-size: clamp(1.5rem, 3vw, 2.5rem);
font-weight: 800;
color: rgba(255, 255, 255, 0.15);
margin-top: 12px;
letter-spacing: -0.02em;
line-height: 1;
}
/* Accent year for 2025 */
.tourism-chart__bar:last-child .tourism-chart__year {
color: rgba(255, 171, 0, 0.35);
}
@media (max-width: 768px) {
.tourism-chart__bars {
height: 320px;
gap: 8px;
}
.tourism-chart__value {
font-size: 0.9rem;
}
.tourism-chart__year {
font-size: 1.1rem;
}
}
/* Section Divider */
.section-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 171, 0, 0.3), transparent);
margin: var(--space-xl) 0 var(--space-3xl);
}
.loc-metric {
flex: 1;
display: flex;
flex-direction: column;
}
.loc-metric__val {
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: 800;
color: var(--color-accent);
line-height: 1;
}
.loc-metric__label {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 6px;
font-weight: 500;
}
.legal-wow-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
position: relative;
z-index: 2;
}
@media (max-width: 900px) {
.legal-wow-grid {
grid-template-columns: 1fr;
}
}
.legal-wow-item {
padding: var(--space-xl) var(--space-lg);
background: rgba(255, 255, 255, 0.03);
border-radius: var(--radius-xl);
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.01);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
display: flex;
gap: var(--space-md);
align-items: flex-start;
}
.legal-wow-item:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.04);
border-color: rgba(212, 184, 122, 0.2);
}
.legal-wow-icon {
position: relative;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-accent);
flex-shrink: 0;
background: rgba(255, 171, 0, 0.08);
border-radius: 14px;
}
.icon-glow {
position: absolute;
inset: 0;
background: var(--color-accent);
filter: blur(15px);
opacity: 0.2;
border-radius: 50%;
transition: opacity 0.3s ease;
}
.legal-wow-item:hover .icon-glow {
opacity: 0.5;
}
.legal-wow-icon i {
width: 24px;
height: 24px;
position: relative;
z-index: 2;
}
.legal-wow-content {
flex: 1;
}
.legal-title {
font-size: 1.125rem;
font-weight: 700;
margin-bottom: 8px;
color: var(--color-text-light);
letter-spacing: -0.01em;
}
.legal-desc {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.65);
line-height: 1.55;
}
/* Section CTA */
.locations-wow__cta {
text-align: center;
margin-top: var(--space-3xl);
position: relative;
z-index: 2;
}
.locations-wow__cta-sub {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: var(--space-sm);
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.5);
}
.legal-icon {
width: 48px;
height: 48px;
margin: 0 auto var(--space-md);
color: var(--color-text-light);
opacity: 0.8;
}
@media (max-width: 992px) {
.locations__grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.legal-grid {
grid-template-columns: 1fr;
gap: var(--space-md);
}
}
/* ============/* =========================================
Hero Extensions (UX Polish)
========================================= */
.hero__scroll-down {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.6);
font-size: 0.875rem;
animation: bounce 2s infinite;
cursor: pointer;
z-index: 10;
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateX(-50%) translateY(0);
}
40% {
transform: translateX(-50%) translateY(-10px);
}
60% {
transform: translateX(-50%) translateY(-5px);
}
}
.hero__social-proof {
display: flex;
align-items: center;
gap: 12px;
margin-top: 12px;
}
.avatars-cluster {
display: flex;
}
.avatar {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid #000;
/* Match bg color */
background-color: #333;
background-size: cover;
margin-left: -10px;
position: relative;
}
.avatar:first-child {
margin-left: 0;
background-image: url('https://i.pravatar.cc/100?img=33');
}
.avatar:nth-child(2) {
background-image: url('https://i.pravatar.cc/100?img=47');
}
.avatar:nth-child(3) {
background-image: url('https://i.pravatar.cc/100?img=12');
}
.hero__micro-copy {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.6);
}
/* =========================================
Reviews Section (Social Proof)
========================================= */
.reviews-section {
padding: var(--space-4xl) 0;
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5));
}
.reviews-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-xl);
margin-top: var(--space-2xl);
}
.review-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform 0.3s;
}
.review-card:hover {
transform: translateY(-5px);
border-color: var(--color-accent);
}
.review-video-placeholder {
width: 100%;
aspect-ratio: 16/9;
background: #000;
display: flex;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
}
.review-video-placeholder img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.7;
}
.play-button {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(4px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
transition: transform 0.2s;
}
.review-card:hover .play-button {
transform: scale(1.1);
background: var(--color-accent);
color: #000;
}
.review-content {
padding: var(--space-lg);
}
.reviewer-info {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.reviewer-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.reviewer-name {
display: block;
font-weight: 700;
color: var(--color-text);
}
.reviewer-role {
font-size: 0.8rem;
color: var(--color-text-muted);
}
.review-text {
font-size: 0.95rem;
color: var(--color-text-dim);
line-height: 1.5;
font-style: italic;
}
/* ROI Calculator */
.roi-calculator {
padding: var(--space-4xl) 0;
background-color: #f4f6f9;
/* Light premium background */
color: var(--color-text-dark);
}
.roi-calculator .section__header {
text-align: center;
margin-bottom: var(--space-xl);
}
.roi-calculator .section__subtitle {
text-align: center;
max-width: 700px;
margin: 0 auto var(--space-3xl);
color: var(--color-text-light-muted);
font-size: var(--text-lg);
line-height: 1.7;
}
.roi-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: start;
}
@media (max-width: 992px) {
.roi-grid {
grid-template-columns: 1fr;
}
}
/* Pricing Style Card */
.calculator-card.pricing-style {
background: #FFFFFF;
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
/* Soft diffuse shadow */
border: 1px solid rgba(0, 0, 0, 0.03);
overflow: hidden;
padding: 0;
/* Remove default padding to control sections */
transition: transform 0.3s ease;
}
.calculator-card.pricing-style:hover {
transform: translateY(-5px);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12);
}
/* Header Section */
.calc-card__header {
padding: 40px 40px 30px 40px;
background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
border-bottom: 1px solid #EEEEEE;
}
.calc-header-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.calc-title {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
color: #999;
}
.calc-investment-display {
margin-bottom: 30px;
}
.calc-value-huge {
font-family: var(--font-heading);
font-size: 56px;
font-weight: 800;
color: var(--color-secondary);
/* Dark Navy */
letter-spacing: -2px;
line-height: 1;
}
/* Input Group */
.calculator-input-group {
margin-bottom: 0;
}
/* Neon Range Gold Variant */
.range-slider.neon-range {
height: 8px;
background: #E0E0E0;
border-radius: 10px;
}
.range-slider.neon-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 28px;
height: 28px;
background: #FFFFFF;
border: 2px solid #FFAB00;
/* Gold */
box-shadow: 0 0 15px rgba(255, 171, 0, 0.5);
cursor: grab;
transition: transform 0.2s ease;
}
.range-slider.neon-range::-webkit-slider-thumb:hover {
transform: scale(1.2);
box-shadow: 0 0 25px rgba(255, 171, 0, 0.7);
}
/* Toggle Styling */
.seasonality-toggle {
display: flex;
align-items: center;
gap: 10px;
background: #F5F5F5;
padding: 4px 12px;
border-radius: 20px;
}
.season-label {
font-size: 12px;
font-weight: 600;
color: #BBB;
transition: color 0.3s;
}
.season-label.active {
color: #333;
}
.switch {
position: relative;
display: inline-block;
width: 36px;
height: 20px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #CCC;
transition: .4s;
}
.slider.round {
border-radius: 20px;
}
.slider.round:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked+.slider {
background-color: #FFAB00;
}
input:checked+.slider:before {
transform: translateX(16px);
}
/* Body Section (List) */
.calc-card__body {
padding: 10px 40px;
}
.calc-feature-list {
list-style: none;
padding: 0;
margin: 0;
}
.calc-feature-item {
display: flex;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid #F0F0F0;
}
.calc-feature-item:last-child {
border-bottom: none;
}
.icon-circle {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 171, 0, 0.1);
color: #FFAB00;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
flex-shrink: 0;
}
.feature-content {
display: flex;
flex-direction: column;
}
.feature-label {
font-size: 14px;
color: #777;
margin-bottom: 4px;
font-weight: 500;
}
.feature-value {
font-size: 20px;
font-weight: 700;
color: var(--color-secondary);
}
.feature-value.text-accent {
color: #FFAB00;
/* Gold */
}
/* Footer Section */
.calc-card__footer {
padding: 30px 40px;
background: #F9FAFB;
border-top: 1px solid #EEEEEE;
display: flex;
align-items: center;
justify-content: space-between;
}
@media (max-width: 768px) {
.calculator-card .calc-card__footer {
flex-direction: column;
gap: 20px;
align-items: stretch;
}
.roi-badge-container {
justify-content: center;
margin-bottom: 10px;
}
}
/* ROI Badge / Ring */
.roi-badge-container {
display: flex;
align-items: center;
gap: 15px;
}
.roi-ring {
width: 40px;
height: 40px;
border-radius: 50%;
background: conic-gradient(#FFAB00 0% 75%, #EEE 75% 100%);
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.roi-ring::after {
content: '';
position: absolute;
width: 32px;
height: 32px;
background: #F9FAFB;
border-radius: 50%;
}
.roi-text {
font-size: 16px;
font-weight: 700;
color: var(--color-secondary);
}
/* Button override */
.calculator-card .btn--outline {
border-color: #DDD;
color: #555;
padding: 12px 24px;
border-radius: 12px;
font-weight: 600;
background: white;
}
.calculator-card .btn--outline:hover {
border-color: #FFAB00;
color: #FFAB00;
background: white;
}
/* Comparison Bars (Right Column) */
/* Comparison Bars (Right Column) */
/* Mobility / Risk Block (Right Column) */
/* Mobility / Risk Block (Right Column) - Light Theme Update */
.mobility-block {
padding-left: var(--space-xl);
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
color: var(--color-secondary);
/* Dark text */
}
.mobility-highlight {
background: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 24px;
padding: 40px;
margin-bottom: var(--space-lg);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
}
.mobility-header {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-lg);
}
.mobility-icon-wrapper {
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(255, 171, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-accent);
}
.mobility-header h3 {
font-size: 1.5rem;
margin: 0;
color: var(--color-secondary);
font-weight: 700;
}
.mobility-desc {
font-size: 1rem;
color: #666;
/* Darker grey */
line-height: 1.6;
margin-bottom: 0;
}
.mobility-divider {
height: 1px;
background: #EEE;
margin: var(--space-lg) 0;
}
/* Moved Chart Styles */
.moved-chart {
display: flex;
flex-direction: column;
gap: 16px;
}
.comparison-row {
width: 100%;
}
.comp-label {
display: flex;
justify-content: space-between;
font-size: 0.95rem;
margin-bottom: 6px;
color: #555;
font-weight: 500;
}
.comp-bar-track {
width: 100%;
height: 8px;
background: #EEE;
/* Visible grey track */
border-radius: 4px;
overflow: hidden;
}
.comp-bar-fill {
height: 100%;
border-radius: 4px;
transition: width 1s ease-out;
}
.comp-bar-fill--jb {
background: var(--color-accent);
box-shadow: 0 0 10px rgba(255, 171, 0, 0.4);
}
.comp-bar-fill--re {
background: #DDD;
/* Darker grey for comparison */
}
.comp-bar-fill--bank {
background: rgba(255, 255, 255, 0.15);
}
/* Mobility Features List */
.mobility-features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.mobility-features li {
display: flex;
gap: var(--space-md);
font-size: 1rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.8);
}
.check-icon {
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(46, 204, 113, 0.1);
color: #2ecc71;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.check-icon svg {
width: 14px;
height: 14px;
}
@media (max-width: 900px) {
.mobility-block {
padding-left: 0;
margin-top: var(--space-xl);
}
}
.mobility-highlight {
margin-bottom: var(--space-xl);
}
.mobility-icon {
font-size: 1.5rem;
color: var(--color-accent);
margin-bottom: var(--space-md);
display: flex;
align-items: center;
gap: 12px;
}
.mobility-features {
list-style: none;
padding: 0;
margin-bottom: var(--space-xl);
}
.mobility-features li {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
font-size: 1rem;
color: var(--color-text-muted);
}
.mobility-visual {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: var(--radius-lg);
height: 200px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
/* Placeholder for map visual */
}
/* =========================================
FAQ & Social Proof
========================================= */
.faq-social {
padding: var(--space-4xl) 0;
}
.trust-line {
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: var(--space-lg) 0;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2xl);
margin-bottom: var(--space-4xl);
flex-wrap: wrap;
}
.trust-label {
text-transform: uppercase;
font-size: 0.875rem;
letter-spacing: 1px;
color: var(--color-text-dim);
}
.trust-logos {
display: flex;
align-items: center;
gap: var(--space-2xl);
flex-wrap: wrap;
justify-content: center;
}
.trust-text {
font-weight: 700;
font-size: 1.25rem;
color: rgba(255, 255, 255, 0.3);
letter-spacing: -0.5px;
}
.faq-wrapper {
max-width: 800px;
margin: 0 auto;
}
.accordion__item {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.accordion__header {
width: 100%;
text-align: left;
background: none;
border: none;
padding: var(--space-lg) 0;
font-size: 1.125rem;
font-weight: 500;
color: var(--color-text);
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: color 0.3s;
}
.accordion__header:hover {
color: var(--color-accent);
}
.accordion__icon {
transition: transform 0.3s;
}
.accordion__content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
}
.accordion__content p {
padding-bottom: var(--space-lg);
color: var(--color-text-muted);
line-height: 1.6;
}
.accordion__item.active .accordion__icon {
transform: rotate(180deg);
}
.accordion__item.active .accordion__content {
max-height: 200px;
/* Adjust as needed */
transition: max-height 0.3s ease-in-out;
}
@media (max-width: 900px) {
.roi-grid {
grid-template-columns: 1fr;
}
.mobility-block {
padding-left: 0;
margin-top: var(--space-2xl);
}
}
/* =====================================================
Exit Strategy Block — Premium
===================================================== */
.exit-strategy {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius-xl);
padding: var(--space-2xl) var(--space-xl);
margin-bottom: var(--space-3xl);
}
.exit-strategy__header {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-xl);
}
.exit-strategy__icon-wrap {
width: 48px;
height: 48px;
border-radius: 14px;
background: rgba(255, 171, 0, 0.08);
border: 1px solid rgba(255, 171, 0, 0.15);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--color-primary);
}
.exit-strategy__icon-wrap i {
width: 24px;
height: 24px;
}
.exit-strategy__header h3 {
font-family: var(--font-heading);
font-size: clamp(1.2rem, 2vw, 1.5rem);
font-weight: 700;
color: #fff;
margin: 0;
line-height: 1.3;
}
.exit-strategy__sub {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255, 255, 255, 0.3);
font-weight: 500;
}
.exit-strategy__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
}
.exit-strategy__item {
display: flex;
gap: var(--space-md);
align-items: flex-start;
}
.exit-strategy__num {
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: 800;
color: rgba(255, 171, 0, 0.2);
line-height: 1;
flex-shrink: 0;
min-width: 36px;
}
.exit-strategy__item strong {
display: block;
font-family: var(--font-heading);
font-size: var(--text-base);
font-weight: 700;
color: #fff;
margin-bottom: 6px;
}
.exit-strategy__item p {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.5);
line-height: 1.6;
margin: 0;
}
/* === CTA === */
.invest-models__cta {
text-align: center;
padding-top: var(--space-md);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
}
.invest-models__cta-sub {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.4);
}
/* =====================================================
Section 4: Responsive Overrides
===================================================== */
@media (max-width: 1024px) {
.invest-models__grid {
grid-template-columns: 1fr 1fr;
}
.invest-card--featured {
grid-column: 1 / -1;
max-width: 480px;
margin: 0 auto;
transform: none;
}
.exit-strategy__grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.invest-models {
padding: var(--space-3xl) 0;
}
.invest-models__grid {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.invest-card--featured {
max-width: 100%;
transform: none;
}
.invest-models__title {
font-size: clamp(1.5rem, 6vw, 2rem);
}
.invest-models__intro {
max-width: 100%;
font-size: var(--text-base);
}
.invest-card__inner {
padding: var(--space-lg);
}
.invest-card__price-num {
font-size: 1.8rem;
}
.exit-strategy {
padding: var(--space-xl) var(--space-lg);
}
.exit-strategy__grid {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.exit-strategy__header h3 {
font-size: 1.15rem;
}
.invest-card__metrics {
gap: var(--space-md);
}
.metric__ring {
width: 44px;
height: 44px;
}
}
/* =====================================================
Section 3: AI Management & Operations (.ai-ops)
===================================================== */
.ai-ops,
.locations-market {
background: radial-gradient(ellipse at 50% 0%, #141a2e 0%, #0a0e1a 60%, #08090f 100%);
position: relative;
overflow: hidden;
}
.ai-ops {
padding: var(--space-4xl) 0;
}
.locations-market {
padding: var(--space-2xl) 0;
}
.ai-ops::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: url('data:image/svg+xml;utf8,');
}
/* === A. Header === */
.ai-ops__header {
text-align: center;
max-width: 800px;
margin: 0 auto var(--space-3xl);
position: relative;
z-index: 2;
}
.ai-ops__eyebrow {
display: inline-block;
color: var(--color-accent);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: var(--space-sm);
}
.ai-ops__title {
font-family: var(--font-heading);
font-size: var(--text-4xl);
font-weight: 800;
margin-bottom: var(--space-md);
letter-spacing: -0.02em;
color: var(--color-text-light);
}
.ai-ops__subtitle {
font-size: var(--text-lg);
color: rgba(255, 255, 255, 0.65);
max-width: 680px;
margin: 0 auto;
line-height: 1.7;
}
/* === B. AI Pipeline === */
.ai-pipeline {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--space-lg);
position: relative;
margin-bottom: var(--space-3xl);
z-index: 2;
}
/* Animated connecting line (desktop) */
.ai-pipeline__line {
position: absolute;
top: 68px;
left: 10%;
right: 10%;
height: 2px;
background: rgba(255, 255, 255, 0.06);
z-index: 0;
border-radius: 2px;
}
.ai-pipeline__line-progress {
width: 0%;
height: 100%;
background: linear-gradient(90deg, var(--color-accent), rgba(255, 171, 0, 0.3));
border-radius: 2px;
transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: 0 0 12px rgba(255, 171, 0, 0.4);
}
.ai-pipeline.is-visible .ai-pipeline__line-progress {
width: 100%;
}
/* Stage cards */
.ai-pipeline__stage {
position: relative;
z-index: 1;
text-align: center;
padding: var(--space-lg) var(--space-md);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius-xl);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
opacity: 0;
transform: translateY(20px);
}
.ai-pipeline.is-visible .ai-pipeline__stage {
opacity: 1;
transform: translateY(0);
}
/* Staggered animation delays */
.ai-pipeline.is-visible .ai-pipeline__stage[data-stage="1"] {
transition-delay: 0.1s;
}
.ai-pipeline.is-visible .ai-pipeline__stage[data-stage="2"] {
transition-delay: 0.25s;
}
.ai-pipeline.is-visible .ai-pipeline__stage[data-stage="3"] {
transition-delay: 0.4s;
}
.ai-pipeline.is-visible .ai-pipeline__stage[data-stage="4"] {
transition-delay: 0.55s;
}
.ai-pipeline.is-visible .ai-pipeline__stage[data-stage="5"] {
transition-delay: 0.7s;
}
.ai-pipeline__stage:hover {
transform: translateY(-6px);
border-color: rgba(255, 171, 0, 0.2);
background: rgba(255, 255, 255, 0.06);
box-shadow: 0 12px 40px rgba(255, 171, 0, 0.08);
}
.ai-pipeline__stage-num {
font-family: var(--font-heading);
font-size: 0.75rem;
font-weight: 700;
color: var(--color-accent);
letter-spacing: 0.1em;
margin-bottom: var(--space-md);
opacity: 0.7;
}
.ai-pipeline__stage-icon {
width: 56px;
height: 56px;
border-radius: 16px;
background: rgba(255, 171, 0, 0.08);
border: 1px solid rgba(255, 171, 0, 0.15);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-md);
color: var(--color-accent);
transition: all 0.3s ease;
}
.ai-pipeline__stage:hover .ai-pipeline__stage-icon {
background: rgba(255, 171, 0, 0.15);
border-color: rgba(255, 171, 0, 0.3);
box-shadow: 0 0 20px rgba(255, 171, 0, 0.15);
}
.ai-pipeline__stage-icon i {
width: 24px;
height: 24px;
}
.ai-pipeline__stage-title {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 700;
color: #fff;
margin-bottom: var(--space-xs);
line-height: 1.3;
}
.ai-pipeline__stage-desc {
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.55);
line-height: 1.6;
}
/* === C. Key Metrics === */
.ai-ops__metrics {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-2xl);
padding: var(--space-xl) var(--space-2xl);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius-xl);
margin-bottom: var(--space-3xl);
position: relative;
z-index: 2;
}
/* Trust footnote inside metrics */
.ai-ops__metrics-trust {
flex-basis: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding-top: var(--space-md);
margin-top: var(--space-xs);
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ai-ops__metrics-trust-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
color: var(--color-accent);
opacity: 0.7;
}
.ai-ops__metrics-trust-text {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.45);
line-height: 1.5;
}
.ai-ops__metrics-trust-text strong {
color: rgba(255, 255, 255, 0.7);
font-weight: 600;
}
.ai-ops__metric {
text-align: center;
flex: 1;
}
.ai-ops__metric-val {
display: block;
font-family: var(--font-heading);
font-size: clamp(2rem, 3.5vw, 3rem);
font-weight: 800;
color: var(--color-accent);
letter-spacing: -0.02em;
line-height: 1.1;
margin-bottom: var(--space-xs);
}
.ai-ops__metric-label {
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.5);
line-height: 1.45;
}
.ai-ops__metric-divider {
width: 1px;
height: 60px;
background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.12), transparent);
flex-shrink: 0;
}
/* === D. Split Battle Comparison === */
.battle {
margin-bottom: var(--space-3xl);
position: relative;
z-index: 2;
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
/* Header */
.battle__header {
text-align: center;
margin-bottom: var(--space-xl);
}
.battle__title {
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: 700;
color: #fff;
margin-bottom: var(--space-xs);
}
.battle__subtitle {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.45);
letter-spacing: 0.02em;
}
/* Column Labels */
.battle__labels {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-lg);
padding: 0 var(--space-xs);
}
.battle__label {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.battle__label--manual {
color: rgba(255, 255, 255, 0.35);
justify-self: end;
}
.battle__label--ai {
color: var(--color-accent);
justify-self: start;
}
.battle__vs {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255, 171, 0, 0.15), rgba(255, 171, 0, 0.05));
border: 1px solid rgba(255, 171, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-size: 0.75rem;
font-weight: 800;
color: var(--color-accent);
letter-spacing: 0.05em;
flex-shrink: 0;
box-shadow: 0 0 20px rgba(255, 171, 0, 0.15);
}
/* Battle Grid */
.battle__grid {
display: flex;
flex-direction: column;
gap: 10px;
}
.battle__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
/* Cards */
.battle__card {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-lg);
transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
position: relative;
overflow: hidden;
}
/* Manual Card — muted, faded */
.battle__card--manual {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.04);
}
.battle__card--manual .battle__card-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(255, 80, 80, 0.06);
border: 1px solid rgba(255, 80, 80, 0.12);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 80, 80, 0.5);
flex-shrink: 0;
}
.battle__card--manual .battle__card-param {
color: rgba(255, 255, 255, 0.4);
}
.battle__card--manual .battle__card-value {
color: rgba(255, 255, 255, 0.25);
text-decoration: line-through;
text-decoration-color: rgba(255, 80, 80, 0.3);
}
.battle__card--manual:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 80, 80, 0.1);
}
/* AI Card — glowing, accent */
.battle__card--ai {
background: linear-gradient(135deg, rgba(255, 171, 0, 0.04) 0%, rgba(255, 255, 255, 0.03) 100%);
border: 1px solid rgba(255, 171, 0, 0.12);
}
.battle__card--ai::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 171, 0, 0.2), transparent);
}
.battle__card--ai .battle__card-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(255, 171, 0, 0.1);
border: 1px solid rgba(255, 171, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-accent);
flex-shrink: 0;
box-shadow: 0 0 12px rgba(255, 171, 0, 0.1);
}
.battle__card--ai .battle__card-param {
color: rgba(255, 255, 255, 0.6);
}
.battle__card--ai .battle__card-value {
color: #fff;
font-weight: 600;
}
.battle__card--ai:hover {
background: linear-gradient(135deg, rgba(255, 171, 0, 0.08) 0%, rgba(255, 255, 255, 0.05) 100%);
border-color: rgba(255, 171, 0, 0.25);
box-shadow: 0 8px 32px rgba(255, 171, 0, 0.08);
transform: translateY(-2px);
}
.battle__card--ai:hover .battle__card-icon {
background: rgba(255, 171, 0, 0.18);
box-shadow: 0 0 20px rgba(255, 171, 0, 0.2);
}
/* Card Body */
.battle__card-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.battle__card-param {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 500;
line-height: 1.3;
}
.battle__card-value {
font-size: 0.9375rem;
line-height: 1.4;
}
/* Bottom Result */
.battle__result {
margin-top: var(--space-xl);
}
.battle__result-inner {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-md);
padding: var(--space-md) var(--space-xl);
background: linear-gradient(135deg, rgba(255, 171, 0, 0.08) 0%, rgba(255, 171, 0, 0.02) 100%);
border: 1px solid rgba(255, 171, 0, 0.2);
border-radius: var(--radius-xl);
position: relative;
overflow: hidden;
}
.battle__result-inner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}
.battle__result-value {
font-family: var(--font-heading);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 800;
color: var(--color-accent);
letter-spacing: -0.02em;
flex-shrink: 0;
}
.battle__result-text {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.6);
line-height: 1.5;
}
/* === E. Trust Block === */
.ai-ops__trust {
display: flex;
align-items: center;
gap: var(--space-lg);
padding: var(--space-xl);
background: linear-gradient(135deg, rgba(255, 171, 0, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
border: 1px solid rgba(255, 171, 0, 0.1);
border-radius: var(--radius-xl);
margin-bottom: var(--space-3xl);
position: relative;
z-index: 2;
}
.ai-ops__trust::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 171, 0, 0.4), transparent);
}
.ai-ops__trust-icon {
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: 16px;
background: rgba(255, 171, 0, 0.1);
border: 1px solid rgba(255, 171, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-accent);
}
.ai-ops__trust-icon i {
width: 28px;
height: 28px;
}
.ai-ops__trust-title {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 700;
color: #fff;
margin-bottom: var(--space-xs);
}
.ai-ops__trust-desc {
font-size: 0.9375rem;
color: rgba(255, 255, 255, 0.65);
line-height: 1.6;
}
/* === F. CTA === */
.ai-ops__cta {
text-align: center;
position: relative;
z-index: 2;
}
.ai-ops__cta-sub {
margin-top: var(--space-sm);
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.4);
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
/* === Responsive === */
@media (max-width: 1024px) {
.ai-pipeline {
grid-template-columns: repeat(3, 1fr);
}
.ai-pipeline__line {
display: none;
}
.ai-pipeline__stage {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
.ai-ops {
padding: var(--space-3xl) 0;
}
.ai-ops__title {
font-size: var(--text-2xl);
}
.ai-ops__subtitle {
font-size: var(--text-base);
}
.ai-pipeline {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.ai-pipeline__stage {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
text-align: left;
padding: var(--space-md) var(--space-lg);
gap: 0 var(--space-md);
}
.ai-pipeline__stage-num {
grid-column: 1;
grid-row: 1 / 3;
display: flex;
align-items: center;
font-size: 1.5rem;
opacity: 0.15;
margin-bottom: 0;
}
.ai-pipeline__stage-icon {
display: none;
}
.ai-pipeline__stage-title {
grid-column: 2;
grid-row: 1;
font-size: 1rem;
margin-bottom: 4px;
}
.ai-pipeline__stage-desc {
grid-column: 2;
grid-row: 2;
font-size: 0.8125rem;
}
/* Metrics */
.ai-ops__metrics {
flex-direction: column;
gap: var(--space-lg);
padding: var(--space-lg);
}
.ai-ops__metric-divider {
width: 60%;
height: 1px;
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
}
.ai-ops__metric-val {
font-size: 2rem;
}
/* Battle Comparison */
.battle__labels {
gap: var(--space-sm);
}
.battle__label {
font-size: 0.6875rem;
gap: 4px;
}
.battle__vs {
width: 32px;
height: 32px;
font-size: 0.625rem;
}
.battle__row {
grid-template-columns: 1fr;
gap: 6px;
}
.battle__card {
padding: var(--space-sm) var(--space-md);
}
.battle__card-param {
font-size: 0.6875rem;
}
.battle__card-value {
font-size: 0.8125rem;
}
.battle__result-inner {
flex-direction: column;
text-align: center;
gap: var(--space-sm);
padding: var(--space-md);
}
.battle__title {
font-size: var(--text-xl);
}
/* Trust */
.ai-ops__trust {
flex-direction: column;
text-align: center;
align-items: center;
}
}