/** * Copyright (c) 2026 DNA Genics, S.L. All rights reserved.
*
* Cinematic Homepage - Premium narrative-driven design
* Elegant serif typography with warm gold accents
*/
/* ========================================
FONT IMPORTS
======================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@400;500;600&display=swap');
/* ========================================
CSS VARIABLES - PREMIUM DESIGN SYSTEM
======================================== */
:root {
/* Primary Brand Colors */
--cin-deep: #0f1419;
--cin-deep-soft: #1a2332;
--cin-navy: #162029;
--cin-slate: #1e2d38;
/* Warm Accent Colors */
--cin-gold: #c9a430;
--cin-gold-light: #d4b94d;
--cin-gold-pale: #f0e4c3;
--cin-gold-subtle: rgba(201, 164, 48, 0.12);
--cin-gold-glow: rgba(201, 164, 48, 0.25);
/* Teal Accent */
--cin-teal: #0d9488;
--cin-teal-light: #14b8a6;
--cin-teal-subtle: rgba(13, 148, 136, 0.1);
/* Warm Earth Tones */
--cin-terracotta: #c4725d;
--cin-sage: #7d9a78;
--cin-sand: #d4c5a9;
/* Neutral Palette */
--cin-white: #ffffff;
--cin-off-white: #faf9f7;
--cin-cream: #f5f3ef;
--cin-gray-100: #f1f0ed;
--cin-gray-200: #e4e2dc;
--cin-gray-300: #c5c2ba;
--cin-gray-400: #9a968c;
--cin-gray-500: #706c64;
--cin-gray-600: #4a473f;
--cin-gray-700: #2d2a24;
--cin-gray-800: #1a1815;
--cin-gray-900: #0d0c0a;
/* Text Colors */
--cin-text-dark: #1a1815;
--cin-text-body: #4a473f;
--cin-text-muted: #706c64;
--cin-text-light: #f0f0f2;
--cin-text-light-muted: rgba(240, 240, 242, 0.7);
/* Typography */
--cin-font-serif: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
--cin-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Spacing - Generous Scale */
--cin-space-xs: 0.5rem;
--cin-space-sm: 1rem;
--cin-space-md: 1.5rem;
--cin-space-lg: 2.5rem;
--cin-space-xl: 4rem;
--cin-space-2xl: 6rem;
--cin-space-3xl: 8rem;
--cin-space-4xl: 10rem;
/* Border Radius */
--cin-radius-sm: 4px;
--cin-radius-md: 8px;
--cin-radius-lg: 12px;
--cin-radius-xl: 16px;
--cin-radius-full: 9999px;
/* Shadows */
--cin-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.04);
--cin-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.06);
--cin-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.08);
--cin-shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.1);
--cin-shadow-gold: 0 8px 32px rgba(201, 164, 48, 0.2);
--cin-shadow-dark: 0 4px 24px rgba(0, 0, 0, 0.4);
/* Borders */
--cin-border-light: rgba(0, 0, 0, 0.06);
--cin-border-dark: rgba(255, 255, 255, 0.08);
--cin-border-gold: rgba(201, 164, 48, 0.3);
/* Transitions */
--cin-ease: cubic-bezier(0.4, 0, 0.2, 1);
--cin-ease-gentle: cubic-bezier(0.25, 0.1, 0.25, 1);
--cin-transition-fast: 0.15s var(--cin-ease);
--cin-transition: 0.3s var(--cin-ease);
--cin-transition-slow: 0.6s var(--cin-ease-gentle);
}
/* ========================================
BASE STYLES
======================================== */
.cin-page {
font-family: var(--cin-font-sans);
color: var(--cin-text-body);
background: var(--cin-off-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
line-height: 1.6;
}
.cin-page *,
.cin-page *::before,
.cin-page *::after {
box-sizing: border-box;
}
/* Skip Link - Accessibility */
.cin-skip-link {
position: absolute;
top: -100px;
left: 16px;
background: var(--cin-gold);
color: var(--cin-white);
padding: 12px 24px;
text-decoration: none;
font-weight: 600;
border-radius: var(--cin-radius-sm);
z-index: 10000;
transition: top var(--cin-transition-fast);
}
.cin-skip-link:focus {
top: 16px;
outline: 3px solid var(--cin-gold-light);
outline-offset: 2px;
}
/* ========================================
PROMOTIONAL BANNER WITH COUNTDOWN
======================================== */
.cin-promo-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1001;
background: linear-gradient(135deg, var(--cin-deep) 0%, #1a2a35 100%);
border-bottom: 1px solid var(--cin-border-gold);
padding: 0.625rem 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
transform: translateY(0);
transition: transform var(--cin-transition);
}
.cin-promo-banner.hidden {
transform: translateY(-100%);
}
.cin-promo-banner-content {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.cin-promo-badge {
display: inline-block;
padding: 0.25rem 0.625rem;
background: var(--cin-gold);
color: var(--cin-gray-900);
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
border-radius: var(--cin-radius-sm);
}
.cin-promo-text {
color: var(--cin-text-light);
font-size: 0.875rem;
}
.cin-promo-text strong {
color: var(--cin-gold);
}
.cin-promo-countdown {
display: flex;
gap: 0.25rem;
align-items: center;
}
.cin-countdown-item {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.25rem 0.5rem;
background: rgba(255, 255, 255, 0.1);
border-radius: var(--cin-radius-sm);
color: var(--cin-text-light);
font-size: 0.75rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.cin-countdown-item span {
color: var(--cin-gold);
font-weight: 700;
min-width: 1.25em;
text-align: center;
}
.cin-promo-cta {
display: inline-flex;
align-items: center;
padding: 0.375rem 1rem;
background: var(--cin-gold);
color: var(--cin-gray-900);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
text-decoration: none;
border-radius: var(--cin-radius-sm);
transition: all var(--cin-transition-fast);
}
.cin-promo-cta:hover {
background: var(--cin-gold-light);
transform: translateY(-1px);
text-decoration: none;
color: var(--cin-gray-900);
}
.cin-promo-close {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
padding: 0.375rem;
cursor: pointer;
opacity: 0.6;
transition: opacity var(--cin-transition-fast);
}
.cin-promo-close:hover {
opacity: 1;
}
.cin-promo-close .cin-icon {
width: 14px;
height: 14px;
filter: brightness(0) invert(1);
}
/* Adjust page when promo banner is visible */
body:has(.cin-promo-banner:not(.hidden)) .cin-hero {
padding-top: calc(80px + 48px + var(--cin-space-xl));
}
@media (max-width: 768px) {
.cin-promo-banner {
padding: 0.5rem 2.5rem 0.5rem 0.75rem;
}
.cin-promo-banner-content {
gap: 0.5rem;
}
.cin-promo-text {
font-size: 0.75rem;
}
.cin-promo-cta {
display: none;
}
}
/* Container */
.cin-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--cin-space-lg);
}
/* ========================================
TYPOGRAPHY - ELEGANT SYSTEM
======================================== */
.cin-display-hero {
font-family: var(--cin-font-serif);
font-size: clamp(2.75rem, 6vw + 1rem, 5rem);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--cin-text-light);
}
.cin-display-1 {
font-family: var(--cin-font-serif);
font-size: clamp(2rem, 4vw + 0.5rem, 3.25rem);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.01em;
}
.cin-display-2 {
font-family: var(--cin-font-serif);
font-size: clamp(1.5rem, 3vw + 0.25rem, 2.25rem);
font-weight: 500;
line-height: 1.2;
}
.cin-heading {
font-family: var(--cin-font-serif);
font-size: 1.375rem;
font-weight: 600;
line-height: 1.3;
}
.cin-subheading {
font-family: var(--cin-font-sans);
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.02em;
}
.cin-body-xl {
font-size: 1.25rem;
line-height: 1.8;
}
.cin-body-lg {
font-size: 1.0625rem;
line-height: 1.75;
}
/* ========================================
CUSTOM ICON SYSTEM - DUOTONE SVGs
======================================== */
/* Base icon styles */
.cin-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1em;
height: 1em;
vertical-align: -0.125em;
flex-shrink: 0;
}
.cin-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Make icons visible in gold-colored contexts */
.cin-service-features .cin-icon img,
.cin-service-link .cin-icon img,
.cin-category-link .cin-icon img {
filter: brightness(0) saturate(100%) invert(77%) sepia(45%) saturate(1000%) hue-rotate(5deg) brightness(1.2);
}
/* Make icons visible in other gold contexts */
.cin-icon--gold img,
.cin-hero-badge .cin-icon img,
.cin-hero-convenience .cin-icon img,
.cin-hero-trust-icon .cin-icon img,
.cin-hero-note .cin-icon img {
filter: brightness(0) saturate(100%) invert(77%) sepia(45%) saturate(1000%) hue-rotate(5deg) brightness(0.9);
}
/* Make icons visible in white/light contexts */
.cin-icon--white img {
filter: brightness(0) invert(1);
}
/* Icon size variants */
.cin-icon--xs { width: 0.75em; height: 0.75em; }
.cin-icon--sm { width: 0.875em; height: 0.875em; }
.cin-icon--md { width: 1.25em; height: 1.25em; }
.cin-icon--lg { width: 1.5em; height: 1.5em; }
.cin-icon--xl { width: 2em; height: 2em; }
.cin-icon--2xl { width: 2.5em; height: 2.5em; }
.cin-icon--3xl { width: 3em; height: 3em; }
/* Fixed size icons (pixel-based) */
.cin-icon--16 { width: 16px; height: 16px; }
.cin-icon--20 { width: 20px; height: 20px; }
.cin-icon--24 { width: 24px; height: 24px; }
.cin-icon--32 { width: 32px; height: 32px; }
.cin-icon--40 { width: 40px; height: 40px; }
.cin-icon--48 { width: 48px; height: 48px; }
/* Icon with text spacing */
.cin-icon + span,
.cin-icon + strong,
span + .cin-icon,
strong + .cin-icon {
margin-left: 0.5em;
}
/* Button icon spacing */
.cin-btn .cin-icon {
margin-right: 0.5em;
}
.cin-btn .cin-icon:last-child {
margin-right: 0;
margin-left: 0.5em;
}
.cin-btn .cin-icon:only-child {
margin: 0;
}
/* Icon block containers (for feature icons) */
.cin-icon-block {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: var(--cin-radius-lg);
background: var(--cin-gold-subtle);
}
.cin-icon-block .cin-icon {
width: 24px;
height: 24px;
}
.cin-icon-block--lg {
width: 64px;
height: 64px;
}
.cin-icon-block--lg .cin-icon {
width: 32px;
height: 32px;
}
.cin-icon-block--xl {
width: 80px;
height: 80px;
}
.cin-icon-block--xl .cin-icon {
width: 40px;
height: 40px;
}
/* Icon block color variants */
.cin-icon-block--gold {
background: var(--cin-gold-subtle);
}
.cin-icon-block--teal {
background: var(--cin-teal-subtle);
}
.cin-icon-block--dark {
background: rgba(255, 255, 255, 0.1);
}
.cin-icon-block--gradient {
background: linear-gradient(135deg, var(--cin-gold-subtle), var(--cin-teal-subtle));
}
/* Circle icon blocks */
.cin-icon-block--circle {
border-radius: var(--cin-radius-full);
}
/* ========================================
ICON COLOR FILTERS - For ![]()
SVGs using currentColor
Since ![]()
tags don't inherit CSS color, we use filters
to colorize the icons for visibility on dark/light backgrounds
======================================== */
/* Gold filter - converts black to gold (#c9a430) */
.cin-icon--gold,
.cin-hero-badge .cin-icon,
.cin-hero-convenience .cin-icon,
.cin-hero-trust-icon .cin-icon,
.cin-hero-note .cin-icon {
filter: invert(68%) sepia(45%) saturate(550%) hue-rotate(8deg) brightness(92%) contrast(90%);
}
/* White filter - for use on dark backgrounds where gold isn't appropriate */
.cin-icon--white {
filter: brightness(0) invert(1);
}
/* Teal filter - converts black to teal */
.cin-icon--teal {
filter: invert(48%) sepia(79%) saturate(380%) hue-rotate(127deg) brightness(92%) contrast(90%);
}
/* Make hero section icons larger and more visible */
.cin-hero-badge .cin-icon {
width: 18px;
height: 18px;
}
.cin-hero-convenience .cin-icon {
width: 22px;
height: 22px;
filter: invert(68%) sepia(45%) saturate(550%) hue-rotate(8deg) brightness(95%) contrast(90%);
}
.cin-hero-trust-icon .cin-icon {
width: 16px;
height: 16px;
}
.cin-hero-note .cin-icon {
width: 14px;
height: 14px;
vertical-align: middle;
margin-right: 0.25rem;
}
/* Button icons on dark backgrounds */
.cin-btn--primary .cin-icon {
width: 18px;
height: 18px;
filter: brightness(0);
}
.cin-btn--outline-white .cin-icon {
width: 18px;
height: 18px;
filter: brightness(0) invert(1);
}
/* Step section icons */
.cin-step-icon .cin-icon {
width: 28px;
height: 28px;
filter: invert(68%) sepia(45%) saturate(550%) hue-rotate(8deg) brightness(92%) contrast(90%);
}
/* Why us section icons */
.cin-why-us-icon .cin-icon {
width: 32px;
height: 32px;
filter: invert(68%) sepia(45%) saturate(550%) hue-rotate(8deg) brightness(92%) contrast(90%);
}
/* Icon hover effects */
.cin-icon--hover-scale {
transition: transform var(--cin-transition-fast);
}
.cin-icon--hover-scale:hover {
transform: scale(1.1);
}
/* Icon animation classes */
.cin-icon--spin {
animation: cin-spin 1s linear infinite;
}
@keyframes cin-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.cin-icon--pulse {
animation: cin-pulse 2s ease-in-out infinite;
}
@keyframes cin-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.cin-body {
font-size: 1rem;
line-height: 1.7;
}
.cin-body-sm {
font-size: 0.875rem;
line-height: 1.6;
}
.cin-text-gold {
color: var(--cin-gold);
}
.cin-text-gradient {
background: linear-gradient(135deg, var(--cin-gold) 0%, var(--cin-gold-light) 50%, var(--cin-sand) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ========================================
SECTION SYSTEM
======================================== */
.cin-section-header {
text-align: center;
max-width: 720px;
margin: 0 auto var(--cin-space-2xl);
}
.cin-section-marker {
width: 48px;
height: 2px;
background: var(--cin-gold);
margin: 0 auto var(--cin-space-md);
}
.cin-section-label {
display: block;
font-family: var(--cin-font-sans);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--cin-gold);
margin-bottom: var(--cin-space-sm);
}
/* ========================================
BUTTONS - REFINED STYLE
======================================== */
.cin-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.875rem 1.75rem;
font-family: var(--cin-font-sans);
font-size: 0.9375rem;
font-weight: 500;
letter-spacing: 0.01em;
text-decoration: none;
border: none;
border-radius: var(--cin-radius-sm);
cursor: pointer;
transition: all var(--cin-transition);
white-space: nowrap;
}
.cin-btn--primary {
background: var(--cin-gold);
color: var(--cin-gray-900);
box-shadow: var(--cin-shadow-gold);
}
.cin-btn--primary:hover {
background: var(--cin-gold);
color: var(--cin-gray-900);
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(201, 164, 48, 0.4);
filter: brightness(1.05);
}
.cin-btn--secondary {
background: transparent;
color: var(--cin-text-dark);
border: 1px solid var(--cin-gray-300);
}
.cin-btn--secondary:hover {
border-color: var(--cin-gold);
color: var(--cin-gold);
}
.cin-btn--ghost {
background: transparent;
color: var(--cin-text-body);
padding: 0.5rem 1rem;
}
.cin-btn--ghost:hover {
color: var(--cin-gold);
}
.cin-btn--lg {
padding: 1rem 2rem;
font-size: 1rem;
}
.cin-btn--white {
background: var(--cin-white);
color: var(--cin-gray-900);
}
.cin-btn--white:hover {
background: var(--cin-cream);
transform: translateY(-2px);
}
.cin-btn--outline-white {
background: rgba(255, 255, 255, 0.05);
color: var(--cin-white);
border: 1px solid rgba(255, 255, 255, 0.4);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.cin-btn--outline-white:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.7);
color: var(--cin-white);
transform: translateY(-2px);
}
.cin-btn--full {
width: 100%;
}
/* ========================================
HERO SECTION - CINEMATIC DARK
======================================== */
.cin-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
padding: calc(80px + var(--cin-space-xl)) 0 var(--cin-space-2xl);
background: var(--cin-deep) url('/img/ui/backgrounds/header-nov-2025-v1.webp') center center / cover no-repeat;
overflow: hidden;
}
.cin-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(to right, rgba(10, 15, 20, 0.85) 0%, rgba(10, 15, 20, 0.6) 50%, rgba(10, 15, 20, 0.4) 100%),
radial-gradient(ellipse 60% 40% at 20% 80%, rgba(201, 164, 48, 0.08) 0%, transparent 50%),
radial-gradient(ellipse 50% 50% at 80% 20%, rgba(13, 148, 136, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.cin-hero-content {
position: relative;
z-index: 2;
}
.cin-hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: var(--cin-gold-subtle);
color: var(--cin-gold);
font-family: var(--cin-font-sans);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: var(--cin-radius-full);
border: 1px solid var(--cin-border-gold);
margin-bottom: var(--cin-space-lg);
}
.cin-hero-badge i {
font-size: 0.625rem;
}
.cin-hero-title {
margin-bottom: var(--cin-space-md);
}
.cin-hero-slogan {
font-family: var(--cin-font-sans);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--cin-gold);
opacity: 0.75;
margin-bottom: var(--cin-space-sm);
}
.cin-hero-subtitle {
font-size: 1.125rem;
line-height: 1.8;
color: var(--cin-text-light-muted);
max-width: 520px;
margin-bottom: var(--cin-space-lg);
}
.cin-link {
color: var(--cin-gold);
text-decoration: underline;
text-decoration-color: rgba(201, 164, 48, 0.4);
transition: color var(--cin-transition-fast), text-decoration-color var(--cin-transition-fast);
}
.cin-link:hover {
color: var(--cin-gold-light);
text-decoration-color: var(--cin-gold-light);
}
.cin-hero-trust {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.875rem;
margin-bottom: var(--cin-space-lg);
}
.cin-hero-trust-item {
display: flex;
align-items: center;
gap: 0.625rem;
font-size: 0.875rem;
color: var(--cin-text-light-muted);
}
.cin-hero-trust-icon {
width: 32px;
height: 32px;
min-width: 32px;
display: flex;
align-items: center;
justify-content: center;
background: var(--cin-gold-subtle);
color: var(--cin-gold);
border-radius: var(--cin-radius-md);
font-size: 0.875rem;
}
.cin-hero-cta {
display: flex;
flex-wrap: wrap;
gap: 0.875rem;
margin-bottom: var(--cin-space-md);
}
.cin-hero-note {
font-size: 0.8125rem;
color: var(--cin-text-light-muted);
opacity: 0.7;
}
.cin-hero-note i {
margin-right: 0.375rem;
color: var(--cin-gold);
}
/* Hero Commercial Positioning Tagline */
.cin-hero-positioning {
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin-bottom: var(--cin-space-sm);
}
/* Hero Value Proposition */
.cin-hero-value-prop {
font-size: 1.25rem;
line-height: 1.6;
color: var(--cin-gold);
font-weight: 500;
margin-bottom: var(--cin-space-md);
max-width: 600px;
}
/* Hero Convenience Badge */
.cin-hero-convenience {
display: inline-flex;
align-items: center;
gap: 0.625rem;
padding: 0.75rem 1.25rem;
background: rgba(201, 164, 48, 0.15);
border: 1px solid var(--cin-border-gold);
border-radius: var(--cin-radius-full);
color: var(--cin-gold-light);
font-size: 0.9375rem;
margin-bottom: var(--cin-space-md);
max-width: 100%;
}
.cin-hero-convenience i {
color: var(--cin-gold);
font-size: 1rem;
}
.cin-hero-convenience strong {
color: var(--cin-gold);
font-weight: 600;
}
/* Hero Guarantee Badge */
.cin-hero-guarantee {
display: inline-flex;
align-items: center;
gap: 0.625rem;
padding: 0.75rem 1.25rem;
background: rgba(13, 148, 136, 0.15);
border: 1px solid rgba(13, 148, 136, 0.3);
border-radius: var(--cin-radius-full);
color: var(--cin-teal-light);
font-size: 0.9375rem;
margin-bottom: var(--cin-space-md);
max-width: 100%;
}
.cin-hero-guarantee i {
color: var(--cin-teal-light);
font-size: 1rem;
}
.cin-hero-guarantee strong {
color: var(--cin-teal-light);
font-weight: 600;
}
/* Hero DNA Providers Compatibility */
.cin-hero-providers {
margin-top: var(--cin-space-md);
padding-top: var(--cin-space-md);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.cin-hero-providers-label {
display: block;
font-size: 0.75rem;
color: var(--cin-text-light-muted);
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.cin-hero-providers-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.cin-provider-badge {
display: inline-block;
padding: 0.25rem 0.75rem;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: var(--cin-radius-full);
color: var(--cin-text-light);
font-size: 0.75rem;
font-weight: 500;
transition: all var(--cin-transition-fast);
}
.cin-provider-badge:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(201, 164, 48, 0.3);
}
.cin-provider-badge--more {
background: var(--cin-gold-subtle);
border-color: var(--cin-border-gold);
color: var(--cin-gold);
}
.cin-hero-visual {
position: relative;
}
/* Hero Report Showcase */
.cin-hero-showcase {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--cin-border-dark);
border-radius: var(--cin-radius-lg);
padding: var(--cin-space-md);
overflow: hidden;
}
.cin-hero-showcase-main {
position: relative;
aspect-ratio: 16 / 10;
border-radius: var(--cin-radius-md);
overflow: hidden;
margin-bottom: var(--cin-space-sm);
}
.cin-hero-showcase-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.5s ease, transform 0.5s ease;
transform: scale(1.02);
}
.cin-hero-showcase-image--active {
opacity: 1;
transform: scale(1);
}
.cin-hero-showcase-thumbnails {
display: flex;
gap: 0.5rem;
margin-bottom: var(--cin-space-sm);
}
.cin-hero-thumbnail {
flex: 1;
background: rgba(255, 255, 255, 0.05);
border: 2px solid transparent;
border-radius: var(--cin-radius-sm);
padding: 0.375rem;
cursor: pointer;
transition: all var(--cin-transition);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
}
.cin-hero-thumbnail:hover {
background: rgba(255, 255, 255, 0.1);
}
.cin-hero-thumbnail--active {
border-color: var(--cin-gold);
background: rgba(201, 164, 48, 0.1);
}
.cin-hero-thumbnail img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
border-radius: var(--cin-radius-xs);
}
.cin-hero-thumbnail-label {
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--cin-text-light-muted);
}
.cin-hero-thumbnail--active .cin-hero-thumbnail-label {
color: var(--cin-gold);
}
.cin-hero-showcase-caption {
text-align: center;
font-size: 0.8125rem;
color: var(--cin-text-light-muted);
}
.cin-hero-showcase-badge {
display: inline-block;
padding: 0.125rem 0.5rem;
background: var(--cin-gold);
color: var(--cin-gray-900);
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: var(--cin-radius-sm);
margin-right: 0.5rem;
}
@media (max-width: 768px) {
.cin-hero-showcase {
padding: var(--cin-space-sm);
}
.cin-hero-thumbnail-label {
display: none;
}
.cin-hero-thumbnail {
padding: 0.25rem;
}
}
/* ========================================
HOW IT WORKS - ELEGANT LIGHT
======================================== */
/* Why Us Section */
.cin-why-us {
padding: var(--cin-space-3xl) 0;
background: var(--cin-deep-soft);
position: relative;
}
.cin-why-us-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--cin-space-lg);
margin-top: var(--cin-space-xl);
}
.cin-why-us-card {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--cin-border-dark);
border-radius: var(--cin-radius-lg);
padding: var(--cin-space-lg);
text-align: center;
transition: transform var(--cin-transition), box-shadow var(--cin-transition);
}
.cin-why-us-card:hover {
transform: translateY(-4px);
box-shadow: var(--cin-shadow-gold);
border-color: var(--cin-border-gold);
}
.cin-why-us-icon {
width: 64px;
height: 64px;
margin: 0 auto var(--cin-space-md);
display: flex;
align-items: center;
justify-content: center;
background: var(--cin-gold-subtle);
border-radius: var(--cin-radius-full);
border: 1px solid var(--cin-border-gold);
}
.cin-why-us-icon i {
font-size: 1.75rem;
color: var(--cin-gold);
}
.cin-why-us-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--cin-text-light);
margin-bottom: var(--cin-space-sm);
font-family: var(--cin-font-serif);
}
.cin-why-us-desc {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--cin-text-light-muted);
margin: 0;
}
.cin-process {
padding: var(--cin-space-3xl) 0;
background: var(--cin-off-white);
}
.cin-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--cin-space-xl);
position: relative;
}
.cin-steps::before {
content: '';
position: absolute;
top: 56px;
left: 20%;
right: 20%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--cin-gold), transparent);
opacity: 0.3;
}
.cin-step {
text-align: center;
position: relative;
}
.cin-step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--cin-gold);
color: var(--cin-gray-900);
font-family: var(--cin-font-serif);
font-size: 1.125rem;
font-weight: 600;
border-radius: var(--cin-radius-full);
margin-bottom: var(--cin-space-md);
position: relative;
z-index: 2;
}
.cin-step-icon {
width: 72px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
background: var(--cin-white);
border: 1px solid var(--cin-gray-200);
border-radius: var(--cin-radius-lg);
margin: 0 auto var(--cin-space-md);
font-size: 1.75rem;
color: var(--cin-gold);
box-shadow: var(--cin-shadow-soft);
}
.cin-step-title {
font-family: var(--cin-font-serif);
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--cin-text-dark);
}
.cin-step-desc {
font-size: 0.9375rem;
color: var(--cin-text-muted);
line-height: 1.7;
}
/* ========================================
PACKAGES AT A GLANCE - PRICING PREVIEW
======================================== */
.cin-pricing-preview {
padding: var(--cin-space-3xl) 0;
background: linear-gradient(180deg, var(--cin-deep) 0%, var(--cin-navy) 100%);
color: var(--cin-text-light);
}
.cin-pricing-preview .cin-section-marker {
background: var(--cin-gold);
}
.cin-pricing-preview .cin-display-1 {
color: var(--cin-text-light);
}
.cin-pricing-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--cin-space-md);
align-items: stretch;
}
.cin-pricing-card {
position: relative;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--cin-border-dark);
border-radius: var(--cin-radius-lg);
padding: var(--cin-space-lg);
display: flex;
flex-direction: column;
transition: all var(--cin-transition);
}
.cin-pricing-card:hover {
transform: translateY(-4px);
border-color: rgba(255, 255, 255, 0.15);
}
.cin-pricing-card--featured {
background: rgba(201, 164, 48, 0.08);
border-color: var(--cin-border-gold);
transform: scale(1.02);
}
.cin-pricing-card--featured:hover {
transform: scale(1.02) translateY(-4px);
border-color: var(--cin-gold);
box-shadow: var(--cin-shadow-gold);
}
.cin-pricing-card--free {
background: rgba(13, 148, 136, 0.05);
border-color: rgba(13, 148, 136, 0.3);
}
.cin-pricing-card--free:hover {
border-color: var(--cin-teal);
}
.cin-pricing-badge {
position: absolute;
top: -0.75rem;
left: 50%;
transform: translateX(-50%);
padding: 0.375rem 1rem;
background: var(--cin-gold);
color: var(--cin-gray-900);
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
border-radius: var(--cin-radius-full);
white-space: nowrap;
}
.cin-pricing-header {
text-align: center;
margin-bottom: var(--cin-space-md);
}
.cin-pricing-name {
font-family: var(--cin-font-serif);
font-size: 1.375rem;
font-weight: 600;
color: var(--cin-text-light);
margin-bottom: 0.25rem;
}
.cin-pricing-tagline {
font-size: 0.875rem;
color: var(--cin-text-light-muted);
margin: 0;
}
.cin-pricing-price {
text-align: center;
margin-bottom: var(--cin-space-md);
padding-bottom: var(--cin-space-md);
border-bottom: 1px solid var(--cin-border-dark);
}
.cin-pricing-original {
display: block;
font-size: 1rem;
color: var(--cin-text-light-muted);
text-decoration: line-through;
margin-bottom: 0.25rem;
}
.cin-pricing-amount {
font-family: var(--cin-font-serif);
font-size: 2.5rem;
font-weight: 600;
color: var(--cin-gold);
}
.cin-pricing-card--free .cin-pricing-amount {
color: var(--cin-teal-light);
}
.cin-pricing-term {
display: block;
font-size: 0.8125rem;
color: var(--cin-text-light-muted);
margin-top: 0.25rem;
}
.cin-pricing-features {
list-style: none;
padding: 0;
margin: 0 0 var(--cin-space-md);
flex-grow: 1;
}
.cin-pricing-features li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--cin-text-light-muted);
padding: 0.5rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.cin-pricing-features li:last-child {
border-bottom: none;
}
.cin-pricing-features li .cin-icon {
width: 16px;
height: 16px;
margin-top: 0.125rem;
flex-shrink: 0;
}
.cin-pricing-features li .cin-icon img {
filter: invert(68%) sepia(45%) saturate(550%) hue-rotate(8deg) brightness(92%) contrast(90%);
}
.cin-pricing-card--free .cin-pricing-features li .cin-icon img {
filter: invert(48%) sepia(79%) saturate(380%) hue-rotate(127deg) brightness(92%) contrast(90%);
}
.cin-pricing-features li strong {
color: var(--cin-text-light);
}
/* Fix button text contrast in pricing cards */
.cin-pricing-card .cin-btn--secondary {
color: var(--cin-text-light);
border-color: var(--cin-gray-300);
}
.cin-pricing-card .cin-btn--secondary:hover {
color: var(--cin-gold);
border-color: var(--cin-gold);
}
@media (max-width: 1024px) {
.cin-pricing-cards {
grid-template-columns: 1fr;
max-width: 400px;
margin: 0 auto;
}
.cin-pricing-card--featured {
transform: none;
order: -1;
}
.cin-pricing-card--featured:hover {
transform: translateY(-4px);
}
}
/* ========================================
FEATURED REPORTS GALLERY
======================================== */
.cin-featured-reports {
padding: var(--cin-space-3xl) 0;
background: linear-gradient(180deg, #1e2832 0%, #2a3441 100%);
color: var(--cin-text-light);
}
.cin-featured-reports .cin-section-marker {
background: var(--cin-gold);
}
.cin-featured-reports .cin-section-label {
color: var(--cin-gold-light);
}
.cin-featured-reports .cin-display-1 {
color: var(--cin-text-light);
}
/* Category Filter Pills */
.cin-filter-pills {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: var(--cin-space-xl);
}
.cin-filter-pill {
padding: 0.625rem 1.5rem;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--cin-radius-full);
color: var(--cin-text-light-muted);
font-family: var(--cin-font-sans);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all var(--cin-transition-fast);
backdrop-filter: blur(8px);
}
.cin-filter-pill:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(201, 164, 48, 0.3);
color: var(--cin-text-light);
}
.cin-filter-pill.active {
background: var(--cin-gold);
border-color: var(--cin-gold);
color: var(--cin-gray-900);
font-weight: 600;
box-shadow: 0 4px 12px rgba(201, 164, 48, 0.3);
}
/* Reports Gallery Grid */
.cin-reports-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--cin-space-lg);
margin-bottom: var(--cin-space-xl);
}
.cin-report-card {
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.05);
border-radius: var(--cin-radius-xl);
overflow: hidden;
text-decoration: none;
color: inherit;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all var(--cin-transition);
backdrop-filter: blur(12px);
opacity: 1;
transform: scale(1);
}
.cin-report-card.cin-hidden {
display: none;
}
.cin-report-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--cin-gold);
border-color: var(--cin-gold);
text-decoration: none;
}
/* Hero Card (2-column span) */
.cin-report-hero {
grid-column: span 2;
}
.cin-report-hero .cin-report-image {
height: 400px;
}
.cin-report-hero .cin-report-title {
font-size: 1.75rem;
}
.cin-report-hero .cin-report-desc {
font-size: 0.9375rem;
margin-bottom: var(--cin-space-md);
}
/* Report Image */
.cin-report-image {
position: relative;
height: 280px;
overflow: hidden;
}
.cin-report-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--cin-transition-slow);
}
.cin-report-card:hover .cin-report-image img {
transform: scale(1.08);
}
.cin-report-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 70%);
pointer-events: none;
}
/* Era Badge */
.cin-report-era {
position: absolute;
top: var(--cin-space-md);
left: var(--cin-space-md);
padding: 0.375rem 0.875rem;
background: rgba(201, 164, 48, 0.95);
color: var(--cin-gray-900);
font-family: var(--cin-font-sans);
font-size: 0.75rem;
font-weight: 600;
border-radius: var(--cin-radius-full);
text-transform: uppercase;
letter-spacing: 0.05em;
z-index: 2;
backdrop-filter: blur(8px);
}
/* Featured Badge (Hero Card) */
.cin-report-badge {
position: absolute;
top: var(--cin-space-md);
right: var(--cin-space-md);
padding: 0.375rem 0.875rem;
background: rgba(255, 255, 255, 0.95);
color: var(--cin-gray-900);
font-family: var(--cin-font-sans);
font-size: 0.75rem;
font-weight: 700;
border-radius: var(--cin-radius-full);
text-transform: uppercase;
letter-spacing: 0.05em;
z-index: 2;
backdrop-filter: blur(8px);
}
/* Coming Soon Badge Variant */
.cin-report-badge--coming-soon {
background: var(--cin-gold);
color: var(--cin-gray-900);
box-shadow: var(--cin-shadow-gold);
}
/* Report Content */
.cin-report-content {
padding: var(--cin-space-lg);
background: rgba(0, 0, 0, 0.3);
flex: 1;
display: flex;
flex-direction: column;
}
.cin-report-category {
display: inline-block;
font-family: var(--cin-font-sans);
font-size: 0.75rem;
font-weight: 500;
color: var(--cin-gold-light);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
opacity: 0.9;
}
.cin-report-title {
font-family: var(--cin-font-serif);
font-size: 1.375rem;
font-weight: 600;
color: var(--cin-text-light);
margin-bottom: var(--cin-space-sm);
line-height: 1.3;
}
.cin-report-desc {
font-size: 0.875rem;
color: var(--cin-text-light-muted);
line-height: 1.6;
margin-bottom: var(--cin-space-md);
flex: 1;
}
/* Feature Tags */
.cin-report-features {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: var(--cin-space-md);
}
.cin-report-feature-tag {
display: inline-block;
padding: 0.25rem 0.75rem;
background: rgba(201, 164, 48, 0.15);
border: 1px solid rgba(201, 164, 48, 0.3);
border-radius: var(--cin-radius-full);
font-family: var(--cin-font-sans);
font-size: 0.6875rem;
font-weight: 500;
color: var(--cin-gold-light);
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* CTA */
.cin-report-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--cin-font-sans);
font-size: 0.875rem;
font-weight: 600;
color: var(--cin-gold);
transition: all var(--cin-transition-fast);
}
.cin-report-card:hover .cin-report-cta {
color: var(--cin-gold-light);
gap: 0.75rem;
}
.cin-report-cta .cin-icon {
width: 16px;
height: 16px;
filter: brightness(0) saturate(100%) invert(70%) sepia(50%) saturate(500%) hue-rotate(5deg);
transition: transform var(--cin-transition-fast);
}
.cin-report-card:hover .cin-report-cta .cin-icon {
transform: translateX(4px);
}
/* CTA Wrapper */
.cin-reports-cta-wrapper {
text-align: center;
margin-top: var(--cin-space-xl);
}
/* Staggered Animation */
@keyframes cinFadeUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Staggered animation applied dynamically by JS on filter changes only */
.cin-report-card.cin-filter-reveal {
animation: cinFadeUp 0.4s ease-out forwards;
}
/* ========================================
ANCIENT ANCESTORS GALLERY
======================================== */
.cin-ancestors-gallery {
padding: var(--cin-space-3xl) 0;
background: linear-gradient(180deg, var(--cin-deep) 0%, var(--cin-navy) 100%);
color: var(--cin-text-light);
}
.cin-ancestors-gallery .cin-section-marker {
background: var(--cin-gold);
}
.cin-ancestors-gallery .cin-display-1 {
color: var(--cin-text-light);
}
.cin-ancestors-scroll-wrapper {
position: relative;
}
.cin-ancestors-scroll {
display: flex;
gap: var(--cin-space-md);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
padding: var(--cin-space-sm) var(--cin-space-sm) var(--cin-space-md);
}
.cin-ancestors-scroll::-webkit-scrollbar {
display: none;
}
.cin-ancestor-card {
flex: 0 0 200px;
min-width: 200px;
scroll-snap-align: start;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--cin-border-dark);
border-radius: var(--cin-radius-lg);
overflow: hidden;
transition: all var(--cin-transition);
}
.cin-ancestor-card:hover {
transform: translateY(-4px);
border-color: var(--cin-border-gold);
box-shadow: var(--cin-shadow-gold);
}
.cin-ancestor-image {
position: relative;
height: 220px;
overflow: hidden;
}
.cin-ancestor-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--cin-transition-slow);
}
.cin-ancestor-card:hover .cin-ancestor-image img {
transform: scale(1.05);
}
.cin-ancestor-info {
padding: var(--cin-space-sm);
}
.cin-ancestor-name {
font-family: var(--cin-font-serif);
font-size: 1rem;
font-weight: 600;
color: var(--cin-text-light);
margin-bottom: 0.375rem;
}
.cin-ancestor-location,
.cin-ancestor-period {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.75rem;
color: var(--cin-text-light-muted);
margin: 0;
}
.cin-ancestor-location .cin-icon,
.cin-ancestor-period .cin-icon {
width: 12px;
height: 12px;
filter: invert(68%) sepia(45%) saturate(550%) hue-rotate(8deg) brightness(92%) contrast(90%);
}
.cin-ancestors-scroll-hint {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: var(--cin-space-md);
font-size: 0.8125rem;
color: var(--cin-text-light-muted);
animation: cin-pulse 2s ease-in-out infinite;
}
.cin-ancestors-scroll-hint .cin-icon {
width: 16px;
height: 16px;
filter: invert(68%) sepia(45%) saturate(550%) hue-rotate(8deg) brightness(92%) contrast(90%);
}
/* ========================================
BENTO GRID - Ancient Ancestors
======================================== */
.cin-bento-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--cin-space-md);
margin-bottom: var(--cin-space-xl);
}
.cin-bento-card {
position: relative;
border-radius: var(--cin-radius-lg);
overflow: hidden;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--cin-border-dark);
min-height: 320px;
display: flex;
flex-direction: column;
transition: all var(--cin-transition);
cursor: pointer;
}
/* Ensure anchor tags with cin-bento-card class maintain proper styling */
a.cin-bento-card {
text-decoration: none;
color: inherit;
display: flex;
}
.cin-bento-card:hover {
transform: scale(1.02);
border-color: var(--cin-gold);
box-shadow: var(--cin-shadow-gold);
}
.cin-bento-card:focus {
outline: 3px solid var(--cin-gold);
outline-offset: 2px;
}
.cin-bento-card.cin-bento-large {
grid-column: span 2;
min-height: 340px;
}
.cin-bento-image {
position: absolute;
inset: 0;
overflow: hidden;
}
.cin-bento-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
transition: transform var(--cin-transition-slow);
}
.cin-bento-card:hover .cin-bento-image img {
transform: scale(1.08);
}
.cin-bento-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(10, 15, 30, 0.95) 0%,
rgba(10, 15, 30, 0.7) 40%,
rgba(10, 15, 30, 0.2) 70%,
transparent 100%
);
}
.cin-bento-content {
position: relative;
z-index: 2;
margin-top: auto;
padding: var(--cin-space-md);
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.cin-bento-badge {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.25rem 0.625rem;
background: var(--cin-gold);
color: var(--cin-navy);
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: 4px;
width: fit-content;
margin-bottom: 0.5rem;
}
.cin-bento-name {
font-family: var(--cin-font-serif);
font-size: 1.25rem;
font-weight: 600;
color: var(--cin-text-light);
margin: 0;
line-height: 1.2;
}
.cin-bento-large .cin-bento-name {
font-size: 1.5rem;
}
.cin-bento-location,
.cin-bento-period {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
color: var(--cin-text-light-muted);
margin: 0;
}
.cin-bento-location .cin-icon,
.cin-bento-period .cin-icon {
width: 12px;
height: 12px;
filter: invert(68%) sepia(45%) saturate(550%) hue-rotate(8deg) brightness(92%) contrast(90%);
}
.cin-bento-desc {
font-size: 0.875rem;
color: var(--cin-text-light-muted);
margin: 0.5rem 0 0;
line-height: 1.5;
opacity: 0.9;
display: none;
}
.cin-bento-large .cin-bento-desc {
display: block;
}
/* Responsive - Tablet */
@media (max-width: 1024px) {
.cin-bento-grid {
grid-template-columns: repeat(2, 1fr);
}
.cin-bento-card {
min-height: 280px;
}
.cin-bento-card.cin-bento-large {
grid-column: span 2;
min-height: 300px;
}
}
/* Responsive - Mobile */
@media (max-width: 576px) {
.cin-bento-grid {
grid-template-columns: 1fr;
gap: var(--cin-space-sm);
}
.cin-bento-card {
min-height: 260px;
}
.cin-bento-card.cin-bento-large {
grid-column: span 1;
min-height: 280px;
}
.cin-bento-name {
font-size: 1.125rem;
}
.cin-bento-large .cin-bento-name {
font-size: 1.25rem;
}
.cin-bento-desc {
font-size: 0.8125rem;
}
}
@media (max-width: 1024px) {
.cin-reports-gallery {
grid-template-columns: repeat(2, 1fr);
gap: var(--cin-space-md);
}
.cin-report-hero {
grid-column: span 2;
}
.cin-report-hero .cin-report-image {
height: 320px;
}
.cin-report-hero .cin-report-title {
font-size: 1.5rem;
}
}
@media (max-width: 768px) {
.cin-reports-gallery {
grid-template-columns: 1fr;
gap: var(--cin-space-md);
}
.cin-report-hero {
grid-column: span 1;
}
.cin-report-hero .cin-report-image {
height: 280px;
}
.cin-report-hero .cin-report-title {
font-size: 1.375rem;
}
.cin-report-image {
height: 240px;
}
.cin-filter-pills {
gap: 0.5rem;
}
.cin-filter-pill {
padding: 0.5rem 1rem;
font-size: 0.8125rem;
}
.cin-ancestor-card {
flex: 0 0 180px;
min-width: 180px;
}
.cin-ancestor-image {
height: 180px;
}
}
/* ========================================
CHOOSE YOUR PATH
======================================== */
.cin-paths {
padding: var(--cin-space-3xl) 0;
background: var(--cin-cream);
}
.cin-path-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--cin-space-md);
}
.cin-path-card {
background: var(--cin-white);
border-radius: var(--cin-radius-lg);
padding: var(--cin-space-lg);
border: 1px solid var(--cin-gray-200);
transition: all var(--cin-transition);
display: flex;
flex-direction: column;
height: 100%;
}
.cin-path-card:hover {
border-color: var(--cin-gold);
box-shadow: var(--cin-shadow-lg), var(--cin-shadow-gold);
transform: translateY(-4px);
}
.cin-path-icon {
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--cin-radius-md);
font-size: 1.5rem;
margin-bottom: var(--cin-space-md);
}
.cin-path-card--story .cin-path-icon {
background: linear-gradient(135deg, var(--cin-gold-subtle), rgba(201, 164, 48, 0.2));
color: var(--cin-gold);
}
.cin-path-card--tools .cin-path-icon {
background: linear-gradient(135deg, var(--cin-teal-subtle), rgba(13, 148, 136, 0.15));
color: var(--cin-teal);
}
.cin-path-card--services .cin-path-icon {
background: linear-gradient(135deg, rgba(196, 114, 93, 0.1), rgba(196, 114, 93, 0.15));
color: var(--cin-terracotta);
}
.cin-path-card--traits .cin-path-icon {
background: linear-gradient(135deg, rgba(139, 108, 183, 0.1), rgba(139, 108, 183, 0.15));
color: #8B6CB7;
}
.cin-path-label {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--cin-text-muted);
margin-bottom: 0.25rem;
}
.cin-path-title {
font-family: var(--cin-font-serif);
font-size: 1.375rem;
font-weight: 600;
margin-bottom: 0.625rem;
color: var(--cin-text-dark);
}
.cin-path-desc {
font-size: 0.9375rem;
color: var(--cin-text-muted);
line-height: 1.7;
margin-bottom: var(--cin-space-md);
flex-grow: 1;
}
.cin-path-features {
list-style: none;
padding: 0;
margin: 0 0 var(--cin-space-md);
}
.cin-path-features li {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--cin-text-body);
padding: 0.5rem 0;
border-bottom: 1px solid var(--cin-gray-100);
}
.cin-path-features li:last-child {
border-bottom: none;
}
.cin-path-features li i {
color: var(--cin-gold);
font-size: 0.625rem;
}
.cin-path-cta {
margin-top: auto;
}
/* ========================================
TRAITS SECTION
======================================== */
.cin-traits {
padding: var(--cin-space-3xl) 0;
background: var(--cin-off-white);
}
.cin-traits-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--cin-space-md);
margin-bottom: var(--cin-space-lg);
}
.cin-trait-card {
background: var(--cin-white);
border-radius: var(--cin-radius-lg);
padding: var(--cin-space-md);
text-align: center;
border: 1px solid var(--cin-gray-200);
transition: all var(--cin-transition);
}
.cin-trait-card:hover {
border-color: var(--cin-gold);
box-shadow: var(--cin-shadow-md);
transform: translateY(-2px);
}
/* Trait cards with images */
.cin-trait-card-with-image {
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.cin-trait-image {
height: 160px;
background-size: cover;
background-position: center;
position: relative;
border-radius: var(--cin-radius-lg) var(--cin-radius-lg) 0 0;
}
.cin-trait-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(45, 52, 54, 0.3) 0%, rgba(45, 52, 54, 0.7) 100%);
display: flex;
align-items: center;
justify-content: center;
transition: background var(--cin-transition);
}
.cin-trait-card-with-image:hover .cin-trait-overlay {
background: linear-gradient(180deg, rgba(45, 52, 54, 0.4) 0%, rgba(45, 52, 54, 0.8) 100%);
}
.cin-trait-overlay .cin-icon {
width: 48px;
height: 48px;
filter: brightness(0) invert(1);
transition: transform var(--cin-transition);
}
.cin-trait-card-with-image:hover .cin-trait-overlay .cin-icon {
transform: scale(1.1);
}
.cin-trait-content {
padding: var(--cin-space-md);
text-align: center;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.cin-trait-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--cin-radius-md);
color: var(--cin-white);
font-size: 1.25rem;
margin: 0 auto var(--cin-space-sm);
}
.cin-trait-title {
font-family: var(--cin-font-serif);
font-size: 1.0625rem;
font-weight: 600;
color: var(--cin-text-dark);
margin-bottom: 0.375rem;
}
.cin-trait-desc {
font-size: 0.8125rem;
color: var(--cin-text-muted);
line-height: 1.6;
}
.cin-traits-more {
text-align: center;
}
.cin-traits-more p {
color: var(--cin-text-muted);
font-size: 0.875rem;
}
/* ========================================
DNA SERVICES - DARK SECTION
======================================== */
.cin-services {
padding: var(--cin-space-3xl) 0;
background: var(--cin-deep);
color: var(--cin-text-light);
position: relative;
}
.cin-services::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse 40% 30% at 10% 90%, rgba(201, 164, 48, 0.06) 0%, transparent 50%),
radial-gradient(ellipse 40% 30% at 90% 10%, rgba(13, 148, 136, 0.04) 0%, transparent 50%);
pointer-events: none;
}
.cin-services .cin-section-marker {
background: var(--cin-gold);
}
.cin-services .cin-display-1 {
color: var(--cin-text-light);
}
.cin-services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--cin-space-md);
position: relative;
z-index: 2;
}
.cin-service-card {
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--cin-border-dark);
border-radius: var(--cin-radius-lg);
padding: var(--cin-space-md);
transition: all var(--cin-transition);
}
.cin-service-card:hover {
background: rgba(255, 255, 255, 0.04);
border-color: var(--cin-border-gold);
transform: translateY(-2px);
}
.cin-service-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: var(--cin-gold-subtle);
border: 1px solid var(--cin-border-gold);
border-radius: var(--cin-radius-md);
color: var(--cin-gold);
font-size: 1.25rem;
margin-bottom: var(--cin-space-sm);
}
.cin-service-icon .cin-icon,
.cin-service-icon .cin-icon img {
filter: invert(68%) sepia(45%) saturate(550%) hue-rotate(8deg) brightness(110%) contrast(90%);
}
.cin-service-title {
font-family: var(--cin-font-serif);
font-size: 1.125rem;
font-weight: 600;
color: var(--cin-text-light);
margin-bottom: 0.375rem;
}
.cin-service-desc {
font-size: 0.875rem;
color: var(--cin-text-light-muted);
line-height: 1.65;
margin-bottom: var(--cin-space-sm);
}
.cin-service-features {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
margin-bottom: var(--cin-space-sm);
}
.cin-service-features span {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.6875rem;
color: var(--cin-gold);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.cin-service-features span i {
font-size: 0.5rem;
}
.cin-service-link {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
font-weight: 500;
color: var(--cin-gold);
text-decoration: none;
transition: all var(--cin-transition-fast);
}
.cin-service-link:hover {
color: var(--cin-gold-light);
}
.cin-service-link i {
font-size: 0.625rem;
transition: transform var(--cin-transition-fast);
}
.cin-service-link:hover i {
transform: translateX(3px);
}
.cin-service-link:hover .cin-icon {
transform: translateX(3px);
}
.cin-services-cta {
margin-top: var(--cin-space-xl);
}
.cin-services-cta .cin-btn {
padding: 0.875rem 2rem;
font-size: 1rem;
font-weight: 600;
}
.cin-services-extra {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--cin-space-lg);
position: relative;
z-index: 2;
margin-top: var(--cin-space-lg);
padding-top: var(--cin-space-md);
border-top: 1px solid var(--cin-border-dark);
}
.cin-services-extra-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
color: var(--cin-text-light-muted);
}
.cin-services-extra-item i {
color: var(--cin-gold);
}
/* ========================================
DEEP TIME SHOWCASE - DARK ELEGANT
======================================== */
.cin-deeptime {
padding: var(--cin-space-3xl) 0;
background: linear-gradient(180deg, var(--cin-navy) 0%, var(--cin-deep) 100%);
color: var(--cin-text-light);
position: relative;
}
.cin-deeptime .cin-section-marker {
background: var(--cin-gold);
}
.cin-deeptime .cin-display-1 {
color: var(--cin-text-light);
}
.cin-era-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--cin-space-md);
}
.cin-era-card {
position: relative;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--cin-border-dark);
border-radius: var(--cin-radius-lg);
padding: var(--cin-space-md);
transition: all var(--cin-transition);
cursor: pointer;
overflow: hidden;
z-index: 1;
}
.cin-era-card::before {
content: '';
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0.15;
z-index: -1;
transition: opacity var(--cin-transition), transform var(--cin-transition-slow);
}
.cin-era-card:hover::before {
opacity: 0.25;
transform: scale(1.05);
}
.cin-era-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 20, 25, 0.4) 0%, rgba(15, 20, 25, 0.85) 100%);
z-index: -1;
}
.cin-era-card--contemporary::before {
background-image: url('/img/reports/ancestry/viking/vikings-hero.webp');
}
.cin-era-card--historical::before {
background-image: url('/img/reports/ancestry/celtic/celtic-hero.webp');
}
.cin-era-card--prehistoric::before {
background-image: url('/img/reports/ancestry/farmer-hunter/farmerhunters-header.webp');
}
.cin-era-card--ancient::before {
background-image: url('/img/reports/ancestry/deep-ancestry/deep-ancestry-hero.webp');
}
.cin-era-card:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.12);
transform: translateY(-2px);
}
.cin-era-badge {
display: inline-block;
padding: 0.25rem 0.625rem;
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
border-radius: var(--cin-radius-full);
margin-bottom: var(--cin-space-sm);
}
.cin-era-card--prehistoric .cin-era-badge {
background: rgba(139, 111, 71, 0.25);
color: #d4b896;
}
.cin-era-card--ancient .cin-era-badge {
background: rgba(125, 154, 120, 0.25);
color: #b8d4b3;
}
.cin-era-card--historical .cin-era-badge {
background: rgba(91, 122, 168, 0.25);
color: #a8c4e8;
}
.cin-era-card--contemporary .cin-era-badge {
background: var(--cin-gold-subtle);
color: var(--cin-gold);
}
.cin-era-title {
font-family: var(--cin-font-serif);
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0.25rem;
color: var(--cin-text-light);
}
.cin-era-period {
font-size: 0.75rem;
color: var(--cin-text-light-muted);
margin-bottom: 0.75rem;
}
.cin-era-desc {
font-size: 0.875rem;
color: var(--cin-text-light-muted);
line-height: 1.65;
margin-bottom: var(--cin-space-sm);
}
.cin-era-features {
list-style: none;
padding: 0;
margin: 0;
}
.cin-era-features li {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.75rem;
color: var(--cin-text-light-muted);
padding: 0.25rem 0;
}
.cin-era-features li i {
color: var(--cin-gold);
font-size: 0.5rem;
}
/* ========================================
PROOF OF SCALE
======================================== */
.cin-proof {
padding: var(--cin-space-3xl) 0;
background: var(--cin-off-white);
}
.cin-metrics {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--cin-space-md);
margin-bottom: var(--cin-space-2xl);
width: 100%;
max-width: 100%;
}
/* Ensure 4 columns on large screens */
@media (min-width: 1025px) {
.cin-metrics {
grid-template-columns: repeat(4, 1fr);
display: grid;
}
}
/* Trustpilot Widget */
.cin-trustpilot-widget {
text-align: center;
margin-bottom: var(--cin-space-xl);
padding: var(--cin-space-md);
background: var(--cin-white);
border-radius: var(--cin-radius-lg);
border: 1px solid var(--cin-gray-200);
box-shadow: var(--cin-shadow-soft);
}
.cin-metric {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
.cin-metric {
text-align: center;
padding: var(--cin-space-md);
}
.cin-metric-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: var(--cin-gold-subtle);
color: var(--cin-gold);
border-radius: var(--cin-radius-md);
font-size: 1.25rem;
margin: 0 auto var(--cin-space-sm);
}
.cin-metric-value {
font-family: var(--cin-font-serif);
font-size: 2.5rem;
font-weight: 500;
color: var(--cin-gold);
margin-bottom: 0.25rem;
}
.cin-metric-label {
font-size: 0.875rem;
color: var(--cin-text-muted);
}
/* Testimonials */
.cin-testimonials {
max-width: 960px;
margin: 0 auto;
}
.cin-testimonials-intro {
text-align: center;
margin-bottom: var(--cin-space-xl);
padding: var(--cin-space-lg);
background: rgba(255, 255, 255, 0.02);
border-radius: var(--cin-radius-lg);
border: 1px solid var(--cin-border-dark);
}
.cin-testimonials-tagline {
color: var(--cin-text-body);
margin-bottom: var(--cin-space-md);
font-style: italic;
}
.cin-emotive-quote {
position: relative;
font-family: var(--cin-font-serif);
font-size: 1.375rem;
line-height: 1.7;
color: var(--cin-text-dark);
font-style: italic;
margin: var(--cin-space-md) 0;
padding: 0 var(--cin-space-lg);
border-left: 3px solid var(--cin-gold);
background: rgba(201, 164, 48, 0.05);
padding: var(--cin-space-md) var(--cin-space-lg);
border-radius: var(--cin-radius-md);
}
.cin-emotive-quote i {
position: absolute;
top: -0.5rem;
left: var(--cin-space-md);
font-size: 2rem;
color: var(--cin-gold);
opacity: 0.3;
}
.cin-emotive-quote span {
position: relative;
z-index: 1;
}
.cin-emotive-author {
display: block;
font-size: 0.9375rem;
color: var(--cin-text-body);
font-style: normal;
margin-top: var(--cin-space-sm);
font-weight: 500;
}
.cin-testimonial-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--cin-space-md);
}
.cin-testimonial {
background: var(--cin-white);
border: 1px solid var(--cin-gray-200);
border-radius: var(--cin-radius-lg);
padding: var(--cin-space-md);
}
.cin-testimonial-stars {
display: flex;
gap: 2px;
color: var(--cin-gold);
font-size: 0.75rem;
margin-bottom: 0.75rem;
}
.cin-testimonial-title {
font-family: var(--cin-font-serif);
font-weight: 600;
font-size: 1.0625rem;
color: var(--cin-text-dark);
margin-bottom: 0.75rem;
line-height: 1.3;
}
.cin-testimonial-text {
font-size: 0.9375rem;
color: var(--cin-text-body);
line-height: 1.7;
margin-bottom: var(--cin-space-sm);
font-style: italic;
}
.cin-testimonial-author {
display: flex;
align-items: center;
gap: 0.75rem;
}
.cin-testimonial-avatar {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--cin-gold);
color: var(--cin-gray-900);
font-size: 0.75rem;
font-weight: 600;
border-radius: var(--cin-radius-full);
}
.cin-testimonial-name {
font-weight: 600;
font-size: 0.875rem;
color: var(--cin-text-dark);
}
.cin-testimonial-source {
font-size: 0.75rem;
color: var(--cin-text-muted);
}
/* ========================================
DATA TO ANALYSIS BRIDGE
======================================== */
.cin-bridge {
padding: var(--cin-space-3xl) 0;
background: var(--cin-cream);
}
.cin-bridge-flow {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--cin-space-md);
align-items: center;
max-width: 860px;
margin: 0 auto;
}
.cin-bridge-card {
background: var(--cin-white);
border-radius: var(--cin-radius-lg);
padding: var(--cin-space-lg);
text-align: center;
border: 1px solid var(--cin-gray-200);
transition: all var(--cin-transition);
}
.cin-bridge-card:hover {
border-color: var(--cin-gold);
box-shadow: var(--cin-shadow-md);
}
.cin-bridge-icon {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
background: var(--cin-gold);
color: var(--cin-gray-900);
border-radius: var(--cin-radius-lg);
font-size: 1.75rem;
margin: 0 auto var(--cin-space-md);
}
.cin-bridge-title {
font-family: var(--cin-font-serif);
font-size: 1.375rem;
font-weight: 600;
margin-bottom: 0.25rem;
color: var(--cin-text-dark);
}
.cin-bridge-subtitle {
font-size: 0.8125rem;
color: var(--cin-gold);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.75rem;
}
.cin-bridge-desc {
font-size: 0.9375rem;
color: var(--cin-text-muted);
line-height: 1.65;
margin-bottom: var(--cin-space-sm);
}
.cin-bridge-verbs {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
justify-content: center;
}
.cin-bridge-verb {
padding: 0.25rem 0.625rem;
background: var(--cin-gold-subtle);
color: var(--cin-gold);
font-size: 0.6875rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: var(--cin-radius-full);
}
.cin-bridge-arrow {
font-size: 1.5rem;
color: var(--cin-gold);
}
/* ========================================
WORLD MAP DISCOVERY
======================================== */
.cin-map {
padding: var(--cin-space-3xl) 0;
background: var(--cin-deep);
color: var(--cin-text-light);
position: relative;
overflow: hidden;
}
.cin-map .cin-section-marker {
background: var(--cin-gold);
}
.cin-map .cin-display-1 {
color: var(--cin-text-light);
}
.cin-map-intro {
text-align: center;
max-width: 800px;
margin: 0 auto var(--cin-space-lg);
}
.cin-map-voiceover {
font-family: var(--cin-font-serif);
font-size: 1.25rem;
font-style: italic;
color: var(--cin-text-light-muted);
margin-bottom: 0.75rem;
}
.cin-map-prompt {
font-size: 0.875rem;
color: var(--cin-gold);
}
/* Integration with ProductSharedRoots map styles */
.cin-map.sr-map-section {
/* Ensure ProductSharedRoots map styles apply */
}
.cin-map .sr-map-container {
margin-top: var(--cin-space-lg);
}
/* Override ProductSharedRoots section content width if needed for cinematic layout */
.cin-map .sr-section-content {
max-width: 100%;
}
/* Leaflet Premium Controls */
.cin-map-container .leaflet-control-zoom {
border: none;
border-radius: var(--cin-radius-md);
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.cin-map-container .leaflet-control-zoom a {
width: 34px;
height: 34px;
line-height: 34px;
background: rgba(15, 20, 25, 0.92);
color: var(--cin-white);
border: none !important;
font-size: 16px;
transition: all 0.2s ease;
}
.cin-map-container .leaflet-control-zoom a:hover {
background: var(--cin-gold);
color: var(--cin-deep);
}
.cin-map-container .leaflet-control-attribution {
background: rgba(15, 20, 25, 0.85) !important;
color: rgba(255, 255, 255, 0.6) !important;
font-size: 0.65rem;
padding: 3px 8px;
backdrop-filter: blur(10px);
}
.cin-map-container .leaflet-control-attribution a {
color: var(--cin-gold-light) !important;
}
.cin-map-container .leaflet-popup-content-wrapper {
background: rgba(15, 20, 25, 0.95);
color: var(--cin-white);
border-radius: var(--cin-radius-md);
border: 1px solid rgba(201, 164, 48, 0.3);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.cin-map-container .leaflet-popup-tip {
background: rgba(15, 20, 25, 0.95);
}
.cin-map-container .leaflet-popup-content {
margin: 12px 16px;
}
.cin-map-container .leaflet-popup-content strong {
color: var(--cin-gold-light);
}
/* ========================================
TRUST & INTEGRITY
======================================== */
.cin-trust {
padding: var(--cin-space-3xl) 0;
background: var(--cin-off-white);
}
.cin-trust-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--cin-space-2xl);
align-items: start;
}
.cin-trust-list {
list-style: none;
padding: 0;
margin: 0;
}
.cin-trust-item {
display: flex;
gap: var(--cin-space-md);
padding: var(--cin-space-md) 0;
border-bottom: 1px solid var(--cin-gray-200);
}
.cin-trust-item:last-child {
border-bottom: none;
}
.cin-trust-icon {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: var(--cin-gold-subtle);
color: var(--cin-gold);
border-radius: var(--cin-radius-md);
font-size: 1.125rem;
flex-shrink: 0;
}
.cin-trust-title {
font-family: var(--cin-font-serif);
font-weight: 600;
color: var(--cin-text-dark);
margin-bottom: 0.25rem;
}
.cin-trust-desc {
font-size: 0.875rem;
color: var(--cin-text-muted);
line-height: 1.6;
}
.cin-trust-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.cin-trust-card {
background: var(--cin-white);
border: 1px solid var(--cin-gray-200);
border-radius: var(--cin-radius-md);
padding: var(--cin-space-md);
text-align: center;
}
.cin-trust-card-icon {
font-size: 1.25rem;
color: var(--cin-gold);
margin-bottom: 0.5rem;
}
.cin-trust-card-title {
font-family: var(--cin-font-serif);
font-weight: 600;
font-size: 0.875rem;
color: var(--cin-text-dark);
margin-bottom: 0.125rem;
}
.cin-trust-card-desc {
font-size: 0.75rem;
color: var(--cin-text-muted);
}
/* Trust Guarantee Banner */
.cin-trust-guarantee-banner {
display: flex;
align-items: flex-start;
gap: var(--cin-space-md);
padding: var(--cin-space-lg);
background: linear-gradient(135deg, rgba(13, 148, 136, 0.1), rgba(20, 184, 166, 0.1));
border: 2px solid var(--cin-teal);
border-radius: var(--cin-radius-lg);
margin-top: var(--cin-space-xl);
}
.cin-guarantee-icon {
flex-shrink: 0;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: var(--cin-teal);
border-radius: var(--cin-radius-full);
color: var(--cin-white);
font-size: 1.5rem;
}
.cin-guarantee-content {
flex: 1;
}
.cin-guarantee-title {
font-family: var(--cin-font-serif);
font-size: 1.25rem;
font-weight: 600;
color: var(--cin-teal);
margin-bottom: var(--cin-space-sm);
}
.cin-guarantee-desc {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--cin-text-body);
margin: 0;
}
/* ========================================
COMPETITOR COMPARISON SECTION
======================================== */
.cin-competitor {
padding: var(--cin-space-3xl) 0;
background: var(--cin-gray-100);
}
.cin-competitor .cin-section-subtitle {
max-width: 650px;
margin: var(--cin-space-sm) auto 0;
color: var(--cin-text-muted);
}
.cin-competitor-table-wrapper {
margin-top: var(--cin-space-xl);
overflow-x: auto;
border-radius: var(--cin-radius-lg);
box-shadow: var(--cin-shadow-soft);
}
.cin-competitor-table {
width: 100%;
min-width: 700px;
border-collapse: collapse;
background: var(--cin-white);
}
.cin-competitor-table thead {
background: var(--cin-gray-50);
}
.cin-competitor-table th,
.cin-competitor-table td {
padding: 1rem 1.25rem;
text-align: center;
border-bottom: 1px solid var(--cin-border-light);
}
.cin-competitor-feature-col {
text-align: left !important;
font-weight: 600;
color: var(--cin-gray-700);
min-width: 250px;
}
.cin-competitor-table td:first-child {
text-align: left;
font-size: 0.9375rem;
color: var(--cin-gray-700);
}
.cin-competitor-col {
width: 150px;
font-weight: 500;
color: var(--cin-gray-600);
}
.cin-competitor-col--highlight {
background: rgba(201, 164, 48, 0.08);
}
.cin-competitor-table thead .cin-competitor-col--highlight {
background: var(--cin-gold-subtle);
}
.cin-competitor-logo {
font-family: var(--cin-font-serif);
font-size: 1.125rem;
font-weight: 700;
color: var(--cin-gold-dark);
}
.cin-competitor-table tbody tr:hover {
background: var(--cin-gray-50);
}
.cin-competitor-table tbody tr:hover td.cin-competitor-col--highlight {
background: rgba(201, 164, 48, 0.12);
}
.cin-check .cin-icon {
width: 22px;
height: 22px;
}
.cin-check .cin-icon img {
filter: invert(48%) sepia(79%) saturate(372%) hue-rotate(86deg) brightness(95%) contrast(90%);
}
.cin-no .cin-icon {
width: 18px;
height: 18px;
filter: invert(50%) sepia(15%) saturate(500%) hue-rotate(315deg) brightness(90%);
}
.cin-partial {
font-size: 0.8125rem;
color: var(--cin-gray-500);
font-style: italic;
}
.cin-competitor-cta {
text-align: center;
margin-top: var(--cin-space-xl);
}
.cin-competitor-note {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9375rem;
color: var(--cin-text-muted);
margin-bottom: var(--cin-space-md);
}
.cin-competitor-note .cin-icon {
width: 18px;
height: 18px;
opacity: 0.6;
}
@media (max-width: 768px) {
.cin-competitor-table-wrapper {
margin-left: -1rem;
margin-right: -1rem;
border-radius: 0;
}
.cin-competitor-table th,
.cin-competitor-table td {
padding: 0.75rem 0.875rem;
font-size: 0.875rem;
}
.cin-competitor-feature-col {
min-width: 180px;
}
}
/* ========================================
DNA ANALYSIS METHODS SECTION
======================================== */
.cin-methods {
padding: var(--cin-space-3xl) 0;
background: linear-gradient(180deg, var(--cin-white) 0%, var(--cin-off-white) 100%);
}
.cin-methods-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--cin-space-lg);
margin-top: var(--cin-space-xl);
}
@media (max-width: 992px) {
.cin-methods-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.cin-methods-grid {
grid-template-columns: 1fr;
}
}
.cin-method-card {
background: var(--cin-white);
border: 1px solid var(--cin-gray-200);
border-radius: var(--cin-radius-lg);
padding: var(--cin-space-lg);
text-align: center;
transition: all var(--cin-transition);
position: relative;
overflow: hidden;
}
.cin-method-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--cin-gold), var(--cin-teal));
opacity: 0;
transition: opacity var(--cin-transition);
}
.cin-method-card:hover {
transform: translateY(-4px);
box-shadow: var(--cin-shadow-lg);
border-color: var(--cin-gold);
}
.cin-method-card:hover::before {
opacity: 1;
}
.cin-method-icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--cin-space-md);
background: var(--cin-gold-subtle);
color: var(--cin-gold);
border-radius: 50%;
font-size: 1.5rem;
transition: all var(--cin-transition);
}
.cin-method-card:hover .cin-method-icon {
background: var(--cin-gold);
color: var(--cin-white);
transform: scale(1.1);
}
.cin-method-title {
font-family: var(--cin-font-serif);
font-weight: 600;
font-size: 1.125rem;
color: var(--cin-text-dark);
margin-bottom: 0.5rem;
}
.cin-method-desc {
font-size: 0.875rem;
color: var(--cin-text-muted);
line-height: 1.6;
}
.cin-methods-cta {
text-align: center;
margin-top: var(--cin-space-xl);
}
/* ========================================
CATEGORY GRID SECTION
======================================== */
.cin-categories {
padding: var(--cin-space-3xl) 0;
background: linear-gradient(180deg, var(--cin-white) 0%, var(--cin-cream) 100%);
}
.cin-category-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--cin-space-lg);
margin-top: var(--cin-space-xl);
}
@media (max-width: 992px) {
.cin-category-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.cin-category-grid {
grid-template-columns: 1fr;
}
}
.cin-category-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--cin-space-xl) var(--cin-space-lg);
background: var(--cin-white);
border: 1px solid var(--cin-gray-200);
border-radius: var(--cin-radius-lg);
text-decoration: none;
color: inherit;
transition: all var(--cin-transition);
position: relative;
overflow: hidden;
}
.cin-category-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--cin-gold);
transform: scaleX(0);
transition: transform var(--cin-transition);
}
.cin-category-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
border-color: transparent;
text-decoration: none;
}
.cin-category-card:hover::before {
transform: scaleX(1);
}
.cin-category-icon {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--cin-gold) 0%, #e8a300 100%);
border-radius: var(--cin-radius-md);
margin-bottom: var(--cin-space-md);
box-shadow: 0 4px 16px rgba(186, 142, 35, 0.25);
}
.cin-category-icon i {
font-size: 1.5rem;
color: var(--cin-white);
}
.cin-category-title {
font-family: var(--cin-font-serif);
font-size: 1.375rem;
font-weight: 600;
color: var(--cin-text-dark);
margin-bottom: var(--cin-space-xs);
}
.cin-category-desc {
font-size: 0.875rem;
color: var(--cin-text-muted);
line-height: 1.6;
margin-bottom: var(--cin-space-md);
flex-grow: 1;
}
.cin-category-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.875rem;
font-weight: 600;
color: var(--cin-gold);
}
.cin-category-link i {
font-size: 0.75rem;
transition: transform var(--cin-transition-fast);
}
.cin-category-card:hover .cin-category-link i {
transform: translateX(4px);
}
/* ========================================
BLOG SECTION
======================================== */
.cin-blog {
padding: var(--cin-space-3xl) 0;
background: var(--cin-gray-100);
}
.cin-blog .cin-section-subtitle {
max-width: 600px;
margin: var(--cin-space-sm) auto 0;
color: var(--cin-text-muted);
}
.cin-blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--cin-space-lg);
margin-top: var(--cin-space-xl);
}
.cin-blog-card {
background: var(--cin-white);
border-radius: var(--cin-radius-lg);
overflow: hidden;
box-shadow: var(--cin-shadow-soft);
transition: all var(--cin-transition);
}
.cin-blog-card:hover {
transform: translateY(-8px);
box-shadow: var(--cin-shadow-elevated);
}
.cin-blog-card-link {
display: block;
text-decoration: none;
color: inherit;
}
.cin-blog-card-image {
position: relative;
height: 200px;
overflow: hidden;
}
.cin-blog-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--cin-transition);
}
.cin-blog-card:hover .cin-blog-card-image img {
transform: scale(1.05);
}
.cin-blog-category {
position: absolute;
top: var(--cin-space-sm);
left: var(--cin-space-sm);
padding: 0.25rem 0.75rem;
background: var(--cin-gold);
color: var(--cin-gray-900);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: var(--cin-radius-sm);
}
.cin-blog-card-content {
padding: var(--cin-space-md);
}
.cin-blog-meta {
display: flex;
align-items: center;
gap: var(--cin-space-md);
margin-bottom: var(--cin-space-sm);
}
.cin-blog-date,
.cin-blog-read-time {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
color: var(--cin-text-muted);
}
.cin-blog-date .cin-icon,
.cin-blog-read-time .cin-icon {
width: 14px;
height: 14px;
opacity: 0.6;
}
.cin-blog-title {
font-family: var(--cin-font-serif);
font-size: 1.25rem;
font-weight: 600;
color: var(--cin-gray-900);
line-height: 1.3;
margin: 0 0 var(--cin-space-sm);
transition: color var(--cin-transition);
}
.cin-blog-card:hover .cin-blog-title {
color: var(--cin-gold-dark);
}
.cin-blog-excerpt {
font-size: 0.9375rem;
color: var(--cin-text-muted);
line-height: 1.6;
margin: 0 0 var(--cin-space-md);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cin-blog-read-more {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--cin-gold-dark);
transition: all var(--cin-transition);
}
.cin-blog-read-more .cin-icon {
width: 16px;
height: 16px;
transition: transform var(--cin-transition);
filter: invert(50%) sepia(60%) saturate(600%) hue-rotate(15deg) brightness(85%);
}
.cin-blog-card:hover .cin-blog-read-more {
color: var(--cin-gold);
}
.cin-blog-card:hover .cin-blog-read-more .cin-icon {
transform: translateX(4px);
}
.cin-blog-cta {
text-align: center;
margin-top: var(--cin-space-xl);
}
@media (max-width: 1024px) {
.cin-blog-grid {
grid-template-columns: repeat(2, 1fr);
}
.cin-blog-grid .cin-blog-card:last-child {
grid-column: span 2;
}
.cin-blog-grid .cin-blog-card:last-child .cin-blog-card-image {
height: 180px;
}
}
@media (max-width: 768px) {
.cin-blog-grid {
grid-template-columns: 1fr;
}
.cin-blog-grid .cin-blog-card:last-child {
grid-column: span 1;
}
.cin-blog-card-image {
height: 180px;
}
.cin-blog-title {
font-size: 1.125rem;
}
}
/* ========================================
FAQ SECTION
======================================== */
.cin-faq {
padding: var(--cin-space-3xl) 0;
background: var(--cin-cream);
}
.cin-faq-list {
max-width: 720px;
margin: 0 auto;
}
.cin-faq-item {
background: var(--cin-white);
border-radius: var(--cin-radius-md);
margin-bottom: 0.75rem;
overflow: hidden;
border: 1px solid var(--cin-gray-200);
}
.cin-faq-question {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--cin-space-md);
background: none;
border: none;
font-family: var(--cin-font-serif);
font-size: 1.0625rem;
font-weight: 600;
color: var(--cin-text-dark);
text-align: left;
cursor: pointer;
transition: all var(--cin-transition-fast);
}
.cin-faq-question:hover {
background: var(--cin-gray-100);
}
.cin-faq-question i {
color: var(--cin-gold);
transition: transform var(--cin-transition-fast);
}
.cin-faq-question[aria-expanded="true"] i {
transform: rotate(180deg);
}
.cin-faq-answer {
padding: 0 var(--cin-space-md) var(--cin-space-md);
font-size: 0.9375rem;
color: var(--cin-text-muted);
line-height: 1.75;
display: none;
}
.cin-faq-answer.active {
display: block;
}
.cin-faq-cta {
text-align: center;
margin-top: var(--cin-space-lg);
}
/* ========================================
COMMUNITY SHOWCASE
======================================== */
.cin-community {
padding: var(--cin-space-3xl) 0;
background: linear-gradient(135deg, var(--cin-deep) 0%, var(--cin-navy) 100%);
color: var(--cin-text-light);
position: relative;
}
.cin-community::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse 50% 40% at 20% 80%, rgba(201, 164, 48, 0.08) 0%, transparent 50%),
radial-gradient(ellipse 40% 40% at 80% 20%, rgba(201, 164, 48, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.cin-community-inner {
display: grid;
grid-template-columns: 1fr 400px;
gap: var(--cin-space-xl);
align-items: center;
position: relative;
z-index: 1;
}
.cin-community-content .cin-section-marker {
background: var(--cin-gold);
}
.cin-community-content .cin-section-label {
color: var(--cin-gold);
}
.cin-community-content .cin-display-2 {
color: var(--cin-text-light);
}
.cin-community-desc {
font-size: 1.0625rem;
color: var(--cin-text-light-muted);
line-height: 1.7;
margin-bottom: var(--cin-space-md);
}
.cin-community-stats {
display: flex;
flex-wrap: wrap;
gap: var(--cin-space-md);
margin-bottom: var(--cin-space-md);
}
.cin-community-stat {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9375rem;
color: var(--cin-text-light-muted);
}
.cin-community-stat .cin-icon {
width: 20px;
height: 20px;
filter: invert(68%) sepia(45%) saturate(550%) hue-rotate(8deg) brightness(92%) contrast(90%);
}
.cin-community-stat strong {
color: var(--cin-gold);
}
.cin-community-topics {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: var(--cin-space-lg);
}
.cin-community-topic {
display: inline-block;
padding: 0.375rem 0.875rem;
background: var(--cin-gold-subtle);
border: 1px solid var(--cin-border-gold);
border-radius: var(--cin-radius-full);
font-size: 0.8125rem;
color: var(--cin-gold-light);
}
.cin-community .cin-btn--primary {
background: var(--cin-gold);
color: var(--cin-gray-900);
}
.cin-community .cin-btn--primary:hover {
background: var(--cin-gold-light);
transform: translateY(-2px);
box-shadow: var(--cin-shadow-gold);
}
.cin-community .cin-btn--primary .cin-icon {
filter: brightness(0);
}
.cin-community-visual {
display: flex;
flex-direction: column;
gap: var(--cin-space-md);
}
.cin-community-testimonials {
display: flex;
flex-direction: column;
gap: var(--cin-space-md);
}
.cin-community-quote {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--cin-border-dark);
border-radius: var(--cin-radius-lg);
padding: var(--cin-space-md);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all var(--cin-transition);
}
.cin-community-quote:hover {
border-color: var(--cin-border-gold);
}
.cin-community-quote p {
font-family: var(--cin-font-serif);
font-size: 1rem;
font-style: italic;
color: var(--cin-text-light);
line-height: 1.6;
margin: 0 0 0.5rem;
}
.cin-community-quote cite {
font-size: 0.8125rem;
color: var(--cin-gold);
font-style: normal;
}
@media (max-width: 1024px) {
.cin-community-inner {
grid-template-columns: 1fr;
text-align: center;
}
.cin-community-content .cin-section-header {
text-align: center !important;
}
.cin-community-content .cin-section-marker {
margin: 0 auto var(--cin-space-sm) !important;
}
.cin-community-stats {
justify-content: center;
}
.cin-community-topics {
justify-content: center;
}
.cin-community-visual {
order: -1;
}
.cin-community-testimonials {
flex-direction: row;
}
.cin-community-quote {
flex: 1;
}
}
@media (max-width: 768px) {
.cin-community-testimonials {
flex-direction: column;
}
}
/* ========================================
MOBILE APP PROMOTION
======================================== */
.cin-app-promo {
padding: var(--cin-space-2xl) 0;
background: var(--cin-cream);
}
.cin-app-promo-inner {
display: grid;
grid-template-columns: 1fr 300px;
gap: var(--cin-space-xl);
align-items: center;
background: var(--cin-white);
border-radius: var(--cin-radius-lg);
padding: var(--cin-space-xl);
border: 1px solid var(--cin-gray-200);
box-shadow: var(--cin-shadow-lg);
}
.cin-app-promo-content .cin-display-2 {
color: var(--cin-text-dark);
}
.cin-app-promo-desc {
font-size: 1rem;
color: var(--cin-text-muted);
line-height: 1.7;
margin-bottom: var(--cin-space-md);
}
.cin-app-features {
list-style: none;
padding: 0;
margin: 0 0 var(--cin-space-md);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
.cin-app-features li {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--cin-text-body);
}
.cin-app-features li .cin-icon {
width: 16px;
height: 16px;
filter: invert(68%) sepia(45%) saturate(550%) hue-rotate(8deg) brightness(92%) contrast(90%);
}
.cin-app-badges {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cin-space-sm);
}
.cin-app-badge img {
height: 48px;
width: auto;
transition: transform var(--cin-transition-fast);
}
.cin-app-badge:hover img {
transform: scale(1.05);
}
.cin-app-coming-soon {
font-size: 0.8125rem;
color: var(--cin-text-muted);
font-style: italic;
}
.cin-app-promo-visual {
display: flex;
align-items: center;
justify-content: center;
}
.cin-app-mockup {
width: 200px;
height: 300px;
background: linear-gradient(135deg, var(--cin-deep), var(--cin-navy));
border-radius: 32px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
border: 4px solid var(--cin-gray-300);
box-shadow: var(--cin-shadow-xl);
}
.cin-app-mockup .cin-icon--phone {
width: 64px;
height: 64px;
filter: invert(68%) sepia(45%) saturate(550%) hue-rotate(8deg) brightness(92%) contrast(90%);
}
.cin-app-mockup-text {
color: var(--cin-gold);
font-size: 0.875rem;
font-weight: 600;
}
@media (max-width: 768px) {
.cin-app-promo-inner {
grid-template-columns: 1fr;
text-align: center;
}
.cin-app-promo-content .cin-section-header {
text-align: center !important;
}
.cin-app-promo-content .cin-section-marker {
margin: 0 auto var(--cin-space-sm) !important;
}
.cin-app-features {
grid-template-columns: 1fr;
}
.cin-app-features li {
justify-content: center;
}
.cin-app-badges {
justify-content: center;
}
.cin-app-promo-visual {
order: -1;
}
.cin-app-mockup {
width: 160px;
height: 240px;
}
}
/* ========================================
NEWSLETTER CAPTURE
======================================== */
.cin-newsletter {
padding: var(--cin-space-xl) 0;
background: linear-gradient(135deg, var(--cin-deep) 0%, var(--cin-navy) 100%);
}
.cin-newsletter-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cin-space-xl);
flex-wrap: wrap;
}
.cin-newsletter-content {
flex: 1;
min-width: 280px;
}
.cin-newsletter-title {
display: flex;
align-items: center;
gap: 0.625rem;
font-family: var(--cin-font-serif);
font-size: 1.375rem;
font-weight: 600;
color: var(--cin-text-light);
margin-bottom: 0.375rem;
}
.cin-newsletter-title .cin-icon {
width: 24px;
height: 24px;
filter: invert(68%) sepia(45%) saturate(550%) hue-rotate(8deg) brightness(92%) contrast(90%);
}
.cin-newsletter-desc {
font-size: 0.9375rem;
color: var(--cin-text-light-muted);
margin: 0;
}
.cin-newsletter-form {
flex: 1;
min-width: 320px;
max-width: 480px;
}
.cin-newsletter-input-group {
display: flex;
gap: 0.5rem;
}
.cin-newsletter-input {
flex: 1;
padding: 0.875rem 1rem;
background: rgba(255, 255, 255, 0.08);
border: 1px solid var(--cin-border-dark);
border-radius: var(--cin-radius-sm);
color: var(--cin-text-light);
font-size: 0.9375rem;
transition: all var(--cin-transition-fast);
}
.cin-newsletter-input::placeholder {
color: var(--cin-text-light-muted);
}
.cin-newsletter-input:focus {
outline: none;
border-color: var(--cin-gold);
background: rgba(255, 255, 255, 0.12);
}
.cin-newsletter-privacy {
display: flex;
align-items: center;
gap: 0.375rem;
margin-top: 0.75rem;
font-size: 0.75rem;
color: var(--cin-text-light-muted);
}
.cin-newsletter-privacy .cin-icon {
width: 12px;
height: 12px;
filter: invert(68%) sepia(45%) saturate(550%) hue-rotate(8deg) brightness(92%) contrast(90%);
}
.cin-newsletter-message {
display: none;
margin-top: 1rem;
padding: 0.875rem 1rem;
border-radius: var(--cin-radius-sm);
text-align: center;
font-size: 0.9375rem;
line-height: 1.5;
transition: all var(--cin-transition-fast);
}
.cin-newsletter-message--success {
background-color: rgba(40, 167, 69, 0.15);
color: #d4edda;
border: 1px solid rgba(40, 167, 69, 0.3);
}
.cin-newsletter-message--error {
background-color: rgba(220, 53, 69, 0.15);
color: #f8d7da;
border: 1px solid rgba(220, 53, 69, 0.3);
}
.cin-newsletter-message:focus {
outline: 2px solid var(--cin-gold);
outline-offset: 2px;
}
.newsletter-btn-spinner {
display: inline-block;
margin-left: 0.5rem;
}
.newsletter-btn-spinner .fa-spinner {
animation: fa-spin 1s infinite linear;
}
@media (max-width: 768px) {
.cin-newsletter-inner {
flex-direction: column;
text-align: center;
}
.cin-newsletter-title {
justify-content: center;
}
.cin-newsletter-form {
width: 100%;
max-width: none;
}
.cin-newsletter-input-group {
flex-direction: column;
}
.cin-newsletter-privacy {
justify-content: center;
}
}
/* ========================================
FINAL CTA
======================================== */
.cin-cta {
padding: var(--cin-space-3xl) 0;
background: linear-gradient(135deg, var(--cin-deep) 0%, var(--cin-navy) 100%);
color: var(--cin-text-light);
text-align: center;
position: relative;
overflow: hidden;
}
.cin-cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 30% 100%, rgba(201, 164, 48, 0.08) 0%, transparent 40%),
radial-gradient(circle at 70% 0%, rgba(201, 164, 48, 0.05) 0%, transparent 40%);
pointer-events: none;
}
.cin-cta-inner {
position: relative;
z-index: 2;
max-width: 720px;
margin: 0 auto;
}
.cin-cta-title {
font-family: var(--cin-font-serif);
color: var(--cin-text-light);
margin-bottom: var(--cin-space-md);
}
.cin-cta-desc {
font-size: 1.0625rem;
line-height: 1.75;
color: var(--cin-text-light-muted);
margin-bottom: var(--cin-space-lg);
}
.cin-cta-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
margin-bottom: var(--cin-space-lg);
}
.cin-cta-stats {
display: flex;
flex-wrap: wrap;
gap: var(--cin-space-lg);
justify-content: center;
}
.cin-cta-stat {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--cin-text-light-muted);
}
.cin-cta-stat .cin-icon {
filter: invert(68%) sepia(45%) saturate(550%) hue-rotate(8deg) brightness(92%) contrast(90%);
}
.cin-cta-stat i {
color: var(--cin-gold);
}
/* ========================================
ANIMATIONS
======================================== */
.cin-animate {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.5s var(--cin-ease-gentle), transform 0.5s var(--cin-ease-gentle);
}
.cin-animate.visible {
opacity: 1;
transform: translateY(0);
}
/* Faster animations for hero section (above the fold) */
.cin-hero .cin-animate {
transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.cin-hero .cin-animate-delay-1 { transition-delay: 0.05s; }
.cin-hero .cin-animate-delay-2 { transition-delay: 0.1s; }
.cin-hero .cin-animate-delay-3 { transition-delay: 0.15s; }
.cin-hero .cin-animate-delay-4 { transition-delay: 0.2s; }
.cin-animate-delay-1 { transition-delay: 0.1s; }
.cin-animate-delay-2 { transition-delay: 0.2s; }
.cin-animate-delay-3 { transition-delay: 0.3s; }
.cin-animate-delay-4 { transition-delay: 0.4s; }
.cin-animate-delay-5 { transition-delay: 0.5s; }
.cin-animate-delay-6 { transition-delay: 0.6s; }
.cin-animate-delay-7 { transition-delay: 0.7s; }
@media (prefers-reduced-motion: reduce) {
.cin-animate {
opacity: 1;
transform: none;
transition: none;
}
}
/* ========================================
RESPONSIVE - TABLET
======================================== */
@media (max-width: 1024px) {
.cin-container {
padding: 0 var(--cin-space-md);
}
.cin-steps {
grid-template-columns: 1fr;
gap: var(--cin-space-lg);
}
.cin-steps::before {
display: none;
}
.cin-path-grid {
grid-template-columns: 1fr;
gap: var(--cin-space-md);
}
.cin-traits-grid {
grid-template-columns: repeat(2, 1fr);
}
.cin-services-grid {
grid-template-columns: repeat(2, 1fr);
}
.cin-era-cards {
grid-template-columns: repeat(2, 1fr);
}
.cin-metrics {
grid-template-columns: repeat(2, 1fr);
}
.cin-testimonial-grid {
grid-template-columns: 1fr;
}
.cin-bridge-flow {
grid-template-columns: 1fr;
text-align: center;
}
.cin-bridge-arrow {
transform: rotate(90deg);
}
.cin-trust-grid {
grid-template-columns: 1fr;
gap: var(--cin-space-lg);
}
.cin-services-extra {
flex-direction: column;
align-items: center;
gap: var(--cin-space-sm);
}
}
/* ========================================
RESPONSIVE - MOBILE
======================================== */
@media (max-width: 768px) {
.cin-container {
padding: 0 var(--cin-space-sm);
}
.cin-space-3xl {
--cin-space-3xl: 4rem;
}
.cin-hero {
min-height: auto;
padding: calc(80px + var(--cin-space-lg)) 0 var(--cin-space-xl);
}
.cin-hero-trust {
grid-template-columns: 1fr;
}
.cin-hero-value-prop {
font-size: 1.0625rem;
}
.cin-hero-convenience,
.cin-hero-guarantee {
font-size: 0.875rem;
padding: 0.625rem 1rem;
align-items: flex-start; /* Icon aligns with first line of text */
}
.cin-hero-convenience .cin-icon,
.cin-hero-guarantee .cin-icon {
flex-shrink: 0; /* Prevent icon from shrinking */
margin-top: 0.125rem; /* Slight offset for visual alignment */
}
.cin-hero-cta {
flex-direction: column;
}
.cin-hero-cta .cin-btn {
width: 100%;
}
.cin-why-us-grid {
grid-template-columns: repeat(2, 1fr);
}
.cin-trust-guarantee-banner {
flex-direction: column;
text-align: center;
}
.cin-guarantee-icon {
margin: 0 auto;
}
.cin-traits-grid {
grid-template-columns: 1fr;
}
.cin-trait-image {
height: 140px;
}
.cin-trait-overlay .cin-icon {
width: 40px;
height: 40px;
}
.cin-trait-content {
padding: var(--cin-space-sm) var(--cin-space-sm) var(--cin-space-md);
}
.cin-why-us-grid {
grid-template-columns: 1fr;
}
.cin-emotive-quote {
font-size: 1.125rem;
padding: var(--cin-space-sm) var(--cin-space-md);
}
.cin-services-grid {
grid-template-columns: 1fr;
}
.cin-era-cards {
grid-template-columns: 1fr;
}
.cin-metrics {
grid-template-columns: 1fr;
}
.cin-metric-value {
font-size: 2rem;
}
.cin-cta-buttons {
flex-direction: column;
}
.cin-cta-buttons .cin-btn {
width: 100%;
}
.cin-cta-stats {
flex-direction: column;
align-items: center;
}
.cin-trust-cards {
grid-template-columns: 1fr;
}
.cin-map-container {
height: 300px;
}
.cin-services-extra-item {
text-align: center;
flex-direction: column;
gap: 0.25rem;
}
}
/* ========================================
MOBILE BOTTOM NAVIGATION
======================================== */
.cin-mobile-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
display: flex;
justify-content: space-around;
align-items: center;
background: rgba(15, 20, 25, 0.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-top: 1px solid var(--cin-border-dark);
padding: 0.5rem 0;
padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}
.cin-mobile-nav-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.25rem;
padding: 0.5rem;
color: var(--cin-text-light-muted);
text-decoration: none;
font-size: 0.625rem;
font-weight: 500;
transition: all var(--cin-transition-fast);
border-radius: var(--cin-radius-md);
min-width: 56px;
}
.cin-mobile-nav-item:hover,
.cin-mobile-nav-item.active {
color: var(--cin-gold);
text-decoration: none;
}
.cin-mobile-nav-item .cin-icon {
width: 20px;
height: 20px;
filter: brightness(0) invert(0.7);
transition: filter var(--cin-transition-fast);
}
.cin-mobile-nav-item:hover .cin-icon,
.cin-mobile-nav-item.active .cin-icon {
filter: invert(68%) sepia(45%) saturate(550%) hue-rotate(8deg) brightness(92%) contrast(90%);
}
/* Add bottom padding to prevent content overlap with mobile nav */
@media (max-width: 767.98px) {
.cin-page {
padding-bottom: 72px;
}
.cin-cta {
padding-bottom: calc(var(--cin-space-3xl) + 72px);
}
}
/* ========================================
PRINT STYLES
======================================== */
@media print {
.cin-mobile-nav {
display: none !important;
}
.cin-hero,
.cin-map,
.cin-cta,
.cin-services,
.cin-deeptime {
background: white !important;
color: black !important;
}
.cin-btn {
display: none;
}
}