/* ==========================================================================
FBR INVOICE ATSOLHIVE — Design System
Design System: Ledger-teal + ink-navy + brass seal-gold
========================================================================== */
/* Font loading moved to + in for performance — see build.py head(). Do not re-add @import here, it blocks rendering and adds a second round-trip. */
/* ---------- 1. Design Tokens ---------- */
:root{
/* Brand colors */
--color-primary: #0B3D3A; /* ledger teal */
--color-primary-dark: #06231F;
--color-primary-light: #145048;
--color-secondary: #123C64; /* ink navy */
--color-accent: #C9A227; /* brass / seal gold */
--color-accent-light: #E4C158;
--color-success: #1F8A5D;
--color-warning: #A66A00;
--color-danger: #B5342B;
/* Neutral scale (cool slate, not warm cream) */
--color-neutral-50: #F5F6F4;
--color-neutral-100: #EBEDE9;
--color-neutral-200: #DCE0DB;
--color-neutral-300: #C2C8C0;
--color-neutral-400: #9AA39B;
--color-neutral-500: #71796F;
--color-neutral-600: #545C50;
--color-neutral-700: #3B423A;
--color-neutral-800: #262B25;
--color-neutral-900: #14170F;
--color-bg: var(--color-neutral-50);
--color-surface: #FFFFFF;
--color-border: var(--color-neutral-200);
--color-text: var(--color-neutral-800);
--color-text-muted: var(--color-neutral-600);
/* Shadows */
--shadow-sm: 0 1px 2px rgba(11,61,58,0.06), 0 1px 1px rgba(11,61,58,0.04);
--shadow-md: 0 6px 16px rgba(11,61,58,0.10), 0 2px 6px rgba(11,61,58,0.06);
--shadow-lg: 0 20px 40px rgba(11,61,58,0.14), 0 6px 14px rgba(11,61,58,0.08);
--shadow-seal: 0 10px 30px rgba(201,162,39,0.35);
/* Radius */
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-full: 999px;
/* Spacing (8px base) */
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 32px;
--space-6: 48px;
--space-7: 64px;
--space-8: 96px;
--space-9: 128px;
--space-10: 160px;
--space-12: 200px;
--container-width: 1200px;
/* Type */
--font-display: 'Fraunces', Georgia, serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'IBM Plex Mono', 'Courier New', monospace;
--transition-fast: 150ms ease;
--transition-base: 250ms cubic-bezier(.4,0,.2,1);
--transition-slow: 500ms cubic-bezier(.4,0,.2,1);
}
/* ---------- 2. Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior: auto; }
*, *::before, *::after{
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
body{
margin:0;
font-family: var(--font-body);
color: var(--color-text);
background: var(--color-bg);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }
h1,h2,h3,h4,p{ margin:0; }
/* ---------- 3. Typography Scale ---------- */
h1, .h1{
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2.4rem, 4.6vw, 3.6rem);
line-height: 1.08;
letter-spacing: -0.01em;
color: var(--color-primary-dark);
}
h2, .h2{
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.8rem, 3vw, 2.5rem);
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--color-primary-dark);
}
h3, .h3{
font-family: var(--font-display);
font-weight: 600;
font-size: 1.35rem;
line-height: 1.3;
color: var(--color-primary-dark);
}
.body-lg{ font-size: 1.15rem; line-height:1.7; color: var(--color-text-muted); }
.body{ font-size: 1rem; line-height:1.7; color: var(--color-text-muted); }
.body-sm{ font-size: 0.9rem; color: var(--color-text-muted); }
.caption{ font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); font-weight:600; }
.mono, .stat-number, .invoice-id{ font-family: var(--font-mono); }
.btn{ font-family: var(--font-body); font-weight:600; font-size:0.95rem; }
.nav-link{ font-family: var(--font-body); font-weight:500; font-size:0.95rem; }
/* ---------- 4. Layout ---------- */
.container{
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--space-4);
}
section{ padding: var(--space-8) 0; }
@media (max-width: 640px){ section{ padding: var(--space-6) 0; } }
.skip-link{
position:absolute; left:-999px; top:0; background:var(--color-primary); color:#fff;
padding:12px 20px; z-index:1000; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }
/* ---------- 5. Header / Nav ---------- */
.site-header{
position: sticky; top:0; z-index:100;
background: rgba(245,246,244,0.97);
border-bottom: 1px solid transparent;
transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}
.site-header.scrolled{
background: rgba(255,255,255,0.98);
border-bottom-color: var(--color-border);
box-shadow: var(--shadow-sm);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding: var(--space-3) var(--space-4); }
.logo{ display:flex; align-items:center; padding:4px 6px; border-radius: var(--radius-md); transition: background var(--transition-fast); }
.logo:hover{ background: rgba(11,61,58,0.05); }
.logo-img{ height:38px; width:auto; display:block; transition: transform var(--transition-base); }
.logo:hover .logo-img{ transform: scale(1.03); }
@media (max-width: 420px){ .logo-img{ height:32px; } }
@media (max-width: 380px){
.logo-img{ height:28px; }
.nav-cta{ gap:6px; }
.nav-cta .btn-primary.btn-sm{ padding:9px 14px; font-size:0.82rem; }
.nav-inner{ padding: var(--space-2) var(--space-3); }
}
.nav-links{ display:flex; gap: var(--space-5); align-items:center; }
.nav-link{ color: var(--color-text); position:relative; padding: 6px 0; }
.nav-link::after{
content:''; position:absolute; left:0; bottom:0; height:2px; width:0; background: var(--color-accent);
transition: width var(--transition-base);
}
.nav-link:hover::after, .nav-link.active::after{ width:100%; }
.nav-link.active{ color: var(--color-primary-dark); font-weight:600; }
.nav-cta{ display:flex; gap:12px; align-items:center; }
.nav-toggle{ display:none; background:none; border:none; padding:8px; }
.nav-toggle svg{ width:26px; height:26px; }
@media (max-width: 900px){
.nav-links{
position:fixed; inset: 0 0 0 30%; background: var(--color-surface);
flex-direction:column; justify-content:flex-start; align-items:flex-start;
padding: 100px var(--space-5); gap: var(--space-4);
transform: translateX(100%); transition: transform var(--transition-base);
box-shadow: var(--shadow-lg);
}
.nav-links.open{ transform: translateX(0); }
.nav-toggle{ display:block; }
.nav-cta .btn-secondary{ display:none; }
}
@media (max-width: 480px){
.nav-links{ inset: 0 0 0 22%; }
}
/* ---------- 6. Buttons ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
padding: 13px 26px; border-radius: var(--radius-full); border:1.5px solid transparent;
transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
white-space:nowrap; position:relative; overflow:hidden;
}
.btn:active{ transform: scale(0.97); }
.btn-primary{ background: var(--color-primary); color:#fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover{ background: var(--color-primary-light); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-accent{ background: var(--color-accent); color: var(--color-primary-dark); }
.btn-accent:hover{ background: var(--color-accent-light); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-secondary{ background: transparent; color: var(--color-primary-dark); border-color: var(--color-border); }
.btn-secondary:hover{ border-color: var(--color-primary); background: var(--color-neutral-100); }
.btn-whatsapp{ background:#1F8A5D; color:#fff; }
.btn-whatsapp:hover{ background:#186F4A; }
.btn-sm{ padding: 9px 18px; font-size:0.85rem; }
.btn-lg{ padding: 16px 32px; font-size:1.02rem; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
outline: 3px solid var(--color-accent); outline-offset:2px;
}
/* ripple */
.btn .ripple{
position:absolute; border-radius:50%; background: rgba(255,255,255,0.5);
transform: scale(0); animation: ripple 600ms ease-out;
pointer-events:none;
}
@keyframes ripple{ to{ transform: scale(3); opacity:0; } }
/* ---------- 7. Badges / Pills ---------- */
.badge{
display:inline-flex; align-items:center; gap:8px; padding: 7px 16px;
border-radius: var(--radius-full); background: var(--color-neutral-100);
font-size:0.82rem; font-weight:600; color: var(--color-primary);
border: 1px solid var(--color-border);
}
.badge-accent{ background: rgba(201,162,39,0.12); color:#8a6c15; border-color: rgba(201,162,39,0.3); }
.badge-dot{ width:7px; height:7px; border-radius:50%; background: var(--color-success); }
/* ---------- 8. Cards ---------- */
.card{
background: var(--color-surface); border:1px solid var(--color-border);
border-radius: var(--radius-lg); padding: var(--space-5);
transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-neutral-300); }
.card-icon{
width:48px; height:48px; border-radius: var(--radius-md); background: var(--color-primary);
display:flex; align-items:center; justify-content:center; margin-bottom: var(--space-3);
}
.card-icon svg{ width:24px; height:24px; stroke:#fff; }
/* ---------- 9. Grids ---------- */
.grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap: var(--space-4); }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); }
.grid-4{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-4); }
@media (max-width: 900px){ .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } }
/* ---------- 10. Section headers ---------- */
.section-head{ max-width: 680px; margin-bottom: var(--space-6); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head .caption{ display:block; margin-bottom: var(--space-2); }
.section-head h2{ margin-bottom: var(--space-3); }
/* ---------- 11. Reveal animations ---------- */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity 700ms ease, transform 700ms ease; }
.reveal.in{ opacity:1; transform: translateY(0); }
.stagger > *{ opacity:0; transform: translateY(20px); transition: opacity 600ms ease, transform 600ms ease; }
.stagger.in > *{ opacity:1; transform: translateY(0); }
.stagger.in > *:nth-child(1){ transition-delay: 0ms; }
.stagger.in > *:nth-child(2){ transition-delay: 90ms; }
.stagger.in > *:nth-child(3){ transition-delay: 180ms; }
.stagger.in > *:nth-child(4){ transition-delay: 270ms; }
.stagger.in > *:nth-child(5){ transition-delay: 360ms; }
.stagger.in > *:nth-child(6){ transition-delay: 450ms; }
/* ---------- 12. Hero ---------- */
.hero{ padding-top: var(--space-8); position:relative; overflow:hidden; }
.hero::before{
content:''; position:absolute; top:-200px; right:-200px; width:600px; height:600px;
background: radial-gradient(circle, rgba(201,162,39,0.16), transparent 70%);
pointer-events:none; animation: heroBlob 14s ease-in-out infinite;
}
.hero::after{
content:''; position:absolute; bottom:-260px; left:-220px; width:520px; height:520px;
background: radial-gradient(circle, rgba(18,60,100,0.10), transparent 70%);
pointer-events:none; animation: heroBlob 18s ease-in-out infinite reverse;
}
@keyframes heroBlob{ 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(-30px,25px) scale(1.08);} }
.hero-grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-7); align-items:center; }
@media (max-width: 960px){ .hero-grid{ grid-template-columns:1fr; } }
.hero-copy p.body-lg{ margin: var(--space-4) 0 var(--space-5); }
.hero-ctas{ display:flex; gap: var(--space-3); flex-wrap:wrap; margin-bottom: var(--space-6); }
.hero-trust{ display:flex; gap: var(--space-4); flex-wrap:wrap; margin-bottom: var(--space-5); }
.trust-item{ display:flex; align-items:center; gap:8px; font-size:0.85rem; color: var(--color-text-muted); }
.trust-item svg{ width:18px; height:18px; stroke: var(--color-success); flex-shrink:0; }
.hero-stats{ display:flex; gap: var(--space-6); flex-wrap:wrap; }
.hero-stats .stat-number{ font-size:1.7rem; font-weight:600; color: var(--color-primary-dark); }
.hero-stats .stat-label{ font-size:0.8rem; color: var(--color-text-muted); }
@media (max-width:480px){ .hero-stats{ gap: var(--space-4); } .hero-stats .stat-number{ font-size:1.4rem; } }
/* ---------- 13. Dashboard preview (signature element) ---------- */
.dash-wrap{ position:relative; }
.dash-card{
background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
border:1px solid var(--color-border); padding: var(--space-4); position:relative;
}
.dash-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom: var(--space-4); }
.dash-title{ font-weight:700; font-size:0.95rem; color:var(--color-primary-dark); }
.dash-dots{ display:flex; gap:6px; }
.dash-dots span{ width:8px; height:8px; border-radius:50%; background: var(--color-neutral-300); }
.dash-row{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-3); }
.dash-mini{ background: var(--color-neutral-50); border-radius: var(--radius-md); padding: var(--space-3); border:1px solid var(--color-border); }
.dash-mini .label{ font-size:0.72rem; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.dash-mini .value{ font-family: var(--font-mono); font-weight:600; font-size:1.25rem; color:var(--color-primary-dark); margin-top:4px; }
.dash-list-item{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--color-border); font-size:0.85rem; }
.dash-list-item:last-child{ border-bottom:none; }
.status-pill{ font-size:0.7rem; font-weight:700; padding:3px 10px; border-radius: var(--radius-full); }
.status-validated{ background: rgba(31,138,93,0.12); color:var(--color-success); }
.status-submitted{ background: rgba(18,60,100,0.1); color: var(--color-secondary); }
.status-pending{ background: rgba(166,106,0,0.12); color: var(--color-warning); }
/* Seal badge — signature stamp animation */
.seal{
position:absolute; top:-26px; right:-26px; width:104px; height:104px; border-radius:50%;
background: radial-gradient(circle at 35% 30%, var(--color-accent-light), var(--color-accent) 65%, #9c7c1c 100%);
display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-seal);
border:3px solid #fff;
animation: stamp 900ms cubic-bezier(.34,1.56,.64,1) 400ms both;
}
@keyframes stamp{
0%{ transform: scale(1.8) rotate(-18deg); opacity:0; }
60%{ transform: scale(0.92) rotate(4deg); opacity:1; }
100%{ transform: scale(1) rotate(-8deg); }
}
.seal svg{ width:46px; height:46px; stroke:#fff; }
.floating-card{
position:absolute; background:#fff; border-radius: var(--radius-md); box-shadow: var(--shadow-md);
padding: 12px 16px; border:1px solid var(--color-border); font-size:0.8rem; font-weight:600;
animation: float 5s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }
.fc-1{ bottom: -20px; left: -30px; animation-delay: 0.3s; }
.fc-2{ top: 40%; left: -50px; animation-delay: 1.2s; }
/* ---------- 14. Logos strip ---------- */
.logos-strip{ display:flex; gap: var(--space-6); justify-content: space-between; align-items:center; flex-wrap:wrap; opacity:0.75; }
.logos-strip span{ font-family: var(--font-mono); font-weight:600; color: var(--color-neutral-500); font-size:0.95rem; letter-spacing:0.03em;}
/* ---------- 15. Stats band ---------- */
.stats-band{ background: var(--color-primary); border-radius: var(--radius-lg); padding: var(--space-6); }
.stats-band .grid-4{ text-align:center; }
.stats-band .stat-number{ font-size:2.4rem; font-weight:700; color:#fff; }
.stats-band .stat-label{ color: rgba(255,255,255,0.75); font-size:0.85rem; margin-top:6px; }
/* ---------- 16. Problem / Solution ---------- */
.problem-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (max-width: 760px){ .problem-grid{ grid-template-columns:1fr; } }
.problem-card{ border-radius: var(--radius-lg); padding: var(--space-4); border:1px solid; }
.problem-card.bad{ background: rgba(181,52,43,0.05); border-color: rgba(181,52,43,0.25); }
.problem-card.good{ background: rgba(31,138,93,0.05); border-color: rgba(31,138,93,0.25); }
.problem-card h3{ display:flex; align-items:center; gap:10px; margin-bottom: var(--space-3); font-size:1.1rem; }
.problem-card ul li{ display:flex; gap:10px; padding:8px 0; font-size:0.92rem; color: var(--color-text-muted); align-items:flex-start; }
.problem-card ul li svg{ width:18px; height:18px; flex-shrink:0; margin-top:2px; }
.problem-card.bad svg{ stroke: var(--color-danger); }
.problem-card.good svg{ stroke: var(--color-success); }
/* ---------- 17. How it works / Timeline ---------- */
.timeline{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5); position:relative; }
@media (max-width:760px){ .timeline{ grid-template-columns:1fr; } .timeline-line{ display:none; } }
.timeline-step{ position:relative; padding-top: var(--space-4); }
.timeline-num{
width:48px; height:48px; border-radius:50%; background: var(--color-primary); color:#fff;
display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-weight:600;
margin-bottom: var(--space-3);
}
.timeline-line{
position:absolute; top:24px; left:calc(50% + 24px); right:calc(-50% + 24px); height:2px;
background: var(--color-border);
}
.timeline-line.animated{ background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-border) 0%); transition: background 1.2s ease; }
/* ---------- 18. Comparison table ---------- */
.comparison-table{ width:100%; border-collapse: collapse; background:var(--color-surface); border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-sm); }
.comparison-table th, .comparison-table td{ padding: 16px 20px; text-align:left; border-bottom:1px solid var(--color-border); font-size:0.92rem; }
.comparison-table th{ font-family: var(--font-display); font-weight:600; background: var(--color-neutral-100); }
.comparison-table td:not(:first-child), .comparison-table th:not(:first-child){ text-align:center; }
.comparison-table .col-good{ color: var(--color-success); font-weight:600; }
.comparison-table .col-bad{ color: var(--color-danger); }
.comparison-table tbody tr:last-child td{ border-bottom:none; }
.comparison-table .highlight-col{ background: rgba(201,162,39,0.06); }
/* ---------- 19. Pricing ---------- */
.pricing-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); align-items:stretch; }
@media (max-width:900px){ .pricing-grid{ grid-template-columns:1fr; } .pricing-card.featured{ transform:none; } }
.pricing-card{ display:flex; flex-direction:column; }
.pricing-card.featured{
border: 2px solid var(--color-accent); box-shadow: var(--shadow-lg); position:relative; transform: scale(1.05);
background: linear-gradient(180deg, rgba(201,162,39,0.06), var(--color-surface) 40%);
}
.pricing-card.featured::before{
content: attr(data-badge); position:absolute; top:-16px; left:50%; transform:translateX(-50%);
background: linear-gradient(100deg, var(--color-accent), var(--color-accent-light)); color: var(--color-primary-dark); font-size:0.74rem; font-weight:800;
letter-spacing:0.03em; text-transform:uppercase; padding:7px 18px; border-radius: var(--radius-full);
box-shadow: var(--shadow-seal);
}
.pricing-card.featured .pricing-price{ color: var(--color-primary-dark); }
.pricing-card.featured h3{ color: var(--color-accent-dark, #8a6c15); }
.pricing-price{ font-family: var(--font-mono); font-size:2.3rem; font-weight:600; color:var(--color-primary-dark); margin: var(--space-3) 0 var(--space-1); }
.pricing-price span{ font-size:0.9rem; font-weight:400; color: var(--color-text-muted); }
.pricing-renewal{ font-size:0.8rem; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.pricing-renewal strong{ color: var(--color-primary-dark); }
.pricing-card ul{ margin: var(--space-4) 0; flex-grow:1; }
.pricing-card ul li{ display:flex; gap:10px; padding:7px 0; font-size:0.9rem; }
.pricing-card ul li svg{ width:16px; height:16px; stroke: var(--color-success); flex-shrink:0; }
/* ---------- 20. Testimonials ---------- */
.testimonial-card{ display:flex; flex-direction:column; gap: var(--space-3); }
.stars{ display:flex; gap:3px; }
.stars svg{ width:16px; height:16px; fill: var(--color-accent); }
.testimonial-author{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top: var(--space-3); }
.author-avatar{
width:42px; height:42px; border-radius:50%; background: var(--color-secondary); color:#fff;
display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--font-display);
}
.author-name{ font-weight:600; font-size:0.9rem; }
.author-role{ font-size:0.78rem; color: var(--color-text-muted); }
.pricing-note {
font-size: 0.8rem;
color: #6b7280;
margin: 0.5rem 0 1rem;
line-height: 1.4;
}
/* ---------- 21. FAQ Accordion ---------- */
.faq-item{ border-bottom:1px solid var(--color-border); }
.faq-question{
width:100%; background:none; border:none; display:flex; justify-content:space-between; align-items:center;
padding: var(--space-4) 0; text-align:left; font-family: var(--font-display); font-weight:600; font-size:1.02rem;
color: var(--color-primary-dark);
}
.faq-question .icon{ width:20px; height:20px; flex-shrink:0; margin-left:16px; transition: transform var(--transition-base); stroke: var(--color-primary); }
.faq-question[aria-expanded="true"] .icon{ transform: rotate(45deg); }
.faq-answer{ max-height:0; overflow:hidden; transition: max-height var(--transition-base); }
.faq-answer-inner{ padding-bottom: var(--space-4); color: var(--color-text-muted); font-size:0.95rem; line-height:1.7; }
/* ---------- 22. CTA Section (reusable) ---------- */
.cta-section{
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
border-radius: var(--radius-lg); padding: var(--space-7) var(--space-6); text-align:center; color:#fff;
position:relative; overflow:hidden;
}
.cta-section::after{
content:''; position:absolute; bottom:-100px; left:-100px; width:300px; height:300px; border-radius:50%;
background: radial-gradient(circle, rgba(201,162,39,0.25), transparent 70%);
}
.cta-section h2{ color:#fff; }
.cta-section p{ color: rgba(255,255,255,0.8); max-width:520px; margin: var(--space-3) auto var(--space-5); }
.cta-buttons{ display:flex; gap: var(--space-3); justify-content:center; flex-wrap:wrap; }
/* ---------- 23. Footer ---------- */
.site-footer{ background: var(--color-primary-dark); color: rgba(255,255,255,0.7); padding-top: var(--space-7); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-5); padding-bottom: var(--space-6); }
@media (max-width: 900px){ .footer-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-col h4{ color:#fff; font-family: var(--font-body); font-size:0.85rem; text-transform:uppercase; letter-spacing:0.06em; margin-bottom: var(--space-3); }
.footer-col ul li{ padding: 5px 0; }
.footer-col ul li a:hover{ color:#fff; }
.footer-logo{ margin-bottom:14px; }
.footer-logo .logo-img{ height:34px; width:auto; display:block; }
.footer-bottom{
border-top:1px solid rgba(255,255,255,0.12); padding: var(--space-4) 0; display:flex;
justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:0.82rem;
}
.footer-socials{ display:flex; gap:12px; }
.footer-socials a{ width:34px; height:34px; border-radius:50%; background: rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; }
.footer-socials svg{ width:16px; height:16px; stroke:#fff; }
/* ---------- 24. WhatsApp Floating Button ---------- */
.wa-float{
position:fixed; bottom:24px; right:24px; z-index:200; width:60px; height:60px; border-radius:50%;
background:#1F8A5D; display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-lg);
transition: transform var(--transition-fast);
}
.wa-float:hover{ transform: scale(1.08); }
.wa-float svg{ width:30px; height:30px; fill:#fff; }
.wa-pulse{
position:absolute; inset:0; border-radius:50%; background:#1F8A5D; animation: wa-pulse 2.4s infinite;
z-index:-1;
}
@keyframes wa-pulse{ 0%{ transform: scale(1); opacity:0.6; } 100%{ transform: scale(1.7); opacity:0; } }
/* ---------- 25. Breadcrumbs / TOC ---------- */
.breadcrumbs{ font-size:0.85rem; color: var(--color-text-muted); padding: var(--space-4) 0 0; }
.breadcrumbs a:hover{ color: var(--color-primary); }
.breadcrumbs .sep{ margin:0 8px; }
.toc{ background: var(--color-neutral-100); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-6); }
.toc h4{ font-family:var(--font-display); margin-bottom:10px; }
.toc ul li{ padding:4px 0; }
.toc a{ color: var(--color-secondary); font-size:0.9rem; }
.toc a:hover{ text-decoration:underline; }
/* ---------- 26. Page hero (inner pages) ---------- */
.page-hero{ padding: var(--space-6) 0 var(--space-6); text-align:center; }
.page-hero h1{ margin-bottom: var(--space-3); }
.page-hero p{ max-width:620px; margin:0 auto; }
/* ---------- 27. Industry / feature detail blocks ---------- */
.detail-block{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items:center; padding: var(--space-6) 0; border-bottom:1px solid var(--color-border); }
.detail-block:last-child{ border-bottom:none; }
.detail-block.reverse{ direction: rtl; }
.detail-block.reverse > *{ direction: ltr; }
@media (max-width:800px){ .detail-block{ grid-template-columns:1fr; } .detail-block.reverse{ direction:ltr; } }
.detail-visual{ background: var(--color-neutral-100); border-radius: var(--radius-lg); padding: var(--space-5); min-height:220px; display:flex; align-items:center; justify-content:center; }
/* ---------- 28. Contact form ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
@media (max-width:800px){ .contact-grid{ grid-template-columns:1fr; } }
.form-group{ margin-bottom: var(--space-4); }
.form-group label{ display:block; font-size:0.85rem; font-weight:600; margin-bottom:6px; color: var(--color-primary-dark); }
.form-group input, .form-group textarea, .form-group select{
width:100%; padding: 12px 14px; border:1.5px solid var(--color-border); border-radius: var(--radius-sm);
font-family: var(--font-body); font-size:0.95rem; background:#fff; transition: border-color var(--transition-fast);
}
.form-group input:focus, .form-group textarea:focus{ border-color: var(--color-primary); outline:none; }
.contact-info-item{ display:flex; gap:14px; padding: var(--space-3) 0; border-bottom:1px solid var(--color-border); }
.contact-info-item svg{ width:22px; height:22px; stroke: var(--color-primary); flex-shrink:0; }
.map-placeholder{ background: var(--color-neutral-100); border-radius: var(--radius-md); height:220px; display:flex; align-items:center; justify-content:center; color: var(--color-text-muted); font-size:0.9rem; margin-top: var(--space-4); }
/* ---------- 33. Screenshot Walkthrough ---------- */
.walkthrough-tabs{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom: var(--space-5); }
.wt-tab{
display:flex; align-items:center; gap:8px; padding: 10px 18px; border-radius: var(--radius-full);
border: 1.5px solid var(--color-border); background: var(--color-surface); font-size:0.88rem; font-weight:600;
color: var(--color-text-muted); transition: all var(--transition-fast);
}
.wt-tab .wt-num{
width:22px; height:22px; border-radius:50%; background: var(--color-neutral-200); color: var(--color-text-muted);
display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-size:0.72rem;
transition: all var(--transition-fast);
}
.wt-tab.active{ border-color: var(--color-primary); color: var(--color-primary-dark); background: rgba(11,61,58,0.05); }
.wt-tab.active .wt-num{ background: var(--color-primary); color:#fff; }
.wt-tab:hover{ border-color: var(--color-primary); }
.wt-panels{ position:relative; }
.wt-panel{ display:none; }
.wt-panel.active{ display:block; animation: wtFade 450ms ease; }
@keyframes wtFade{ from{ opacity:0; transform: translateY(14px);} to{ opacity:1; transform:translateY(0);} }
.wt-shots{ display:grid; grid-template-columns: 1fr; gap: var(--space-4); }
.wt-shots.two-up{ grid-template-columns: 1fr 1fr; }
@media (max-width: 800px){ .wt-shots.two-up{ grid-template-columns: 1fr; } }
.wt-shot-frame{
border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--color-border); box-shadow: var(--shadow-md);
background: var(--color-neutral-100);
}
.wt-shot-frame img{ width:100%; height:auto; display:block; }
.wt-caption{ text-align:center; max-width:640px; margin: var(--space-4) auto 0; }
.wt-caption h3{ margin-bottom:8px; }
/* ---------- 34. Scroll progress bar ---------- */
.scroll-progress{
position:fixed; top:0; left:0; height:3px; width:0%; background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
z-index:300; transition: width 80ms linear;
}
/* ---------- 35. Hero heading gradient accent ---------- */
.grad-accent{
background: linear-gradient(100deg, var(--color-primary-dark) 20%, var(--color-secondary) 55%, var(--color-accent) 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
/* ---------- 36. Page load fade ---------- */
body{ animation: pageFade 500ms ease; }
@keyframes pageFade{ from{ opacity:0;} to{ opacity:1;} }
/* ---------- 37. Image reveal (screenshots, illustrations) ---------- */
.img-reveal{ opacity:0; transform: translateY(24px) scale(0.98); transition: opacity 700ms ease, transform 700ms ease; }
.img-reveal.in{ opacity:1; transform: translateY(0) scale(1); }
/* ---------- 38. Section divider accents ---------- */
.section-divider{ height:1px; background: linear-gradient(90deg, transparent, var(--color-border) 20%, var(--color-border) 80%, transparent); margin: 0 auto; max-width: var(--container-width); }
/* ---------- 39. Section rhythm & polish ---------- */
.tint-section{ background: linear-gradient(180deg, var(--color-neutral-100) 0%, var(--color-bg) 100%); }
.btn-primary, .btn-accent{ position:relative; }
.btn-primary::before, .btn-accent::before{
content:''; position:absolute; inset:0; border-radius:inherit;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
transform: translateX(-100%); transition: transform 700ms ease;
}
.btn-primary:hover::before, .btn-accent:hover::before{ transform: translateX(100%); }
.card-icon{ background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); transition: transform var(--transition-base); }
.card:hover .card-icon{ transform: scale(1.08) rotate(-4deg); }
/* ---------- 39. Vertical Process Steps (real onboarding flow) ---------- */
.process-steps{ position:relative; max-width:720px; margin:0 auto; }
.process-step{ display:flex; gap: var(--space-4); padding-bottom: var(--space-6); position:relative; }
.process-step:last-child{ padding-bottom:0; }
.process-step:not(:last-child)::before{
content:''; position:absolute; left:21px; top:44px; bottom:0; width:2px;
background: linear-gradient(180deg, var(--color-border), var(--color-border) 80%, transparent);
}
.process-num{
width:44px; height:44px; border-radius:50%; background: var(--color-primary); color:#fff;
display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-weight:600;
flex-shrink:0; position:relative; z-index:1; box-shadow: var(--shadow-sm);
}
.process-content{ padding-top:6px; }
.process-content h3{ margin-bottom:8px; }
.process-content p{ margin-bottom:0; }
.process-checklist{
margin-top: var(--space-3); background: var(--color-neutral-100); border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4); border:1px solid var(--color-border);
}
.process-checklist p{ font-size:0.85rem; font-weight:600; margin-bottom:8px; color: var(--color-primary-dark); }
.process-checklist ul{ display:grid; grid-template-columns: 1fr 1fr; gap:4px 16px; }
.process-checklist li{ font-size:0.85rem; color: var(--color-text-muted); padding:2px 0; }
@media (max-width:560px){ .process-checklist ul{ grid-template-columns:1fr; } }
/* ---------- 29. Utility ---------- */
.text-center{ text-align:center; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.mt-1{ margin-top: var(--space-4); }
.mt-2{ margin-top: var(--space-6); }
.flex{ display:flex; }
.flex-wrap{ flex-wrap:wrap; }
.gap-2{ gap: var(--space-2); }
.gap-3{ gap: var(--space-3); }
.list-check li{ display:flex; gap:10px; padding:6px 0; }
.list-check svg{ width:18px; height:18px; stroke: var(--color-success); flex-shrink:0; margin-top:2px; }
/* ---------- 30. Long-form content / prose ---------- */
.prose{ max-width: 760px; margin:0 auto; }
.prose h2{ margin-top: var(--space-6); margin-bottom: var(--space-3); }
.prose h3{ margin-top: var(--space-5); margin-bottom: var(--space-2); }
.prose p{ color: var(--color-text-muted); margin-bottom: var(--space-3); line-height:1.75; }
.prose ul{ margin-bottom: var(--space-3); }
.prose ul li{ color: var(--color-text-muted); padding:4px 0 4px 22px; position:relative; }
.prose ul li::before{ content:'—'; position:absolute; left:0; color: var(--color-accent); }
/* ---------- 31. City chips ---------- */
.city-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.city-chip{ padding:8px 16px; background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-full); font-size:0.85rem; }
.city-chip.primary{ border-color: var(--color-accent); background: rgba(201,162,39,0.08); font-weight:600; }