/* =============================================
Komar Media — Brand System
Primary: #1E252C Charcoal Navy
Secondary: #7F7666 Warm Taupe
Accent: #C47A2C Conversion Copper
BG: #FAFBFC Soft White
Surface: #F1F0EF Warm Gray
============================================= */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
–primary: #1E252C;
–secondary: #7F7666;
–accent: #C47A2C;
–accent-hover: #A86824;
–bg: #FAFBFC;
–surface: #F1F0EF;
–text: #1A1A1A;
–muted: #6B7280;
–white: #FFFFFF;
–border: #E5E7EB;
–shadow-sm: 0 1px 3px rgba(30, 37, 44, 0.08);
–shadow-md: 0 4px 20px rgba(30, 37, 44, 0.10);
–shadow-lg: 0 8px 40px rgba(30, 37, 44, 0.14);
–radius: 12px;
–radius-lg: 16px;
–radius-pill: 999px;
–font-heading: ‘Outfit’, system-ui, sans-serif;
–font-body: ‘Inter’, system-ui, sans-serif;
–header-h: 72px;
}
html {
scroll-behavior: smooth;
scroll-padding-top: var(–header-h);
}
body {
font-family: var(–font-body);
font-size: 16px;
line-height: 1.6;
color: var(–text);
background: var(–bg);
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(–accent);
text-decoration: none;
transition: color 0.2s;
}
a:hover {
color: var(–accent-hover);
}
.container {
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 0 24px;
}
/* —- Typography —- */
h1, h2, h3, h4 {
font-family: var(–font-heading);
font-weight: 700;
line-height: 1.15;
color: var(–primary);
}
h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.25rem; }
.section-label {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(–accent);
margin-bottom: 12px;
}
.section-sub {
color: var(–muted);
font-size: 1.125rem;
max-width: 600px;
margin: 12px auto 48px;
text-align: center;
}
.accent { color: var(–accent); }
/* —- Buttons —- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 14px 28px;
font-family: var(–font-body);
font-size: 0.9375rem;
font-weight: 600;
border-radius: var(–radius-pill);
border: 2px solid transparent;
cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
text-decoration: none;
white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
background: var(–accent);
color: var(–white);
box-shadow: 0 4px 14px rgba(196, 122, 44, 0.35);
}
.btn-primary:hover {
background: var(–accent-hover);
color: var(–white);
box-shadow: 0 6px 20px rgba(196, 122, 44, 0.45);
}
.btn-outline {
background: var(–white);
color: var(–primary);
border-color: var(–primary);
}
.btn-outline:hover {
background: var(–primary);
color: var(–white);
}
.btn-sm { padding: 10px 20px; font-size: 0.875rem; }
.btn-block { width: 100%; }
/* —- Header —- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(–border);
height: var(–header-h);
}
.header-inner {
display: flex;
align-items: center;
gap: 32px;
height: var(–header-h);
}
.logo img {
height: 40px;
width: auto;
}
.nav-desktop {
display: flex;
gap: 28px;
margin-left: auto;
}
.nav-desktop a {
font-size: 0.9375rem;
font-weight: 500;
color: var(–muted);
transition: color 0.2s;
}
.nav-desktop a:hover { color: var(–primary); }
.nav-cta { margin-left: 8px; }
.nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
margin-left: auto;
}
.nav-toggle span {
display: block;
width: 24px;
height: 2px;
background: var(–primary);
border-radius: 2px;
transition: transform 0.2s, opacity 0.2s;
}
.nav-mobile {
display: none;
flex-direction: column;
gap: 16px;
padding: 20px 24px 28px;
background: var(–white);
border-bottom: 1px solid var(–border);
}
.nav-mobile[hidden] { display: none; }
.nav-mobile.open { display: flex; }
.nav-mobile a {
font-weight: 500;
color: var(–primary);
font-size: 1rem;
}
/* —- Hero —- */
.hero {
padding: 72px 0 80px;
background: linear-gradient(160deg, var(–bg) 0%, var(–surface) 100%);
overflow: hidden;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.badge {
display: inline-block;
padding: 6px 14px;
background: var(–surface);
border: 1px solid var(–border);
border-radius: var(–radius-pill);
font-size: 0.8125rem;
font-weight: 500;
color: var(–secondary);
margin-bottom: 20px;
}
.rating {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.875rem;
color: var(–muted);
margin-bottom: 20px;
}
.stars { color: #F59E0B; letter-spacing: 2px; }
.hero h1 { margin-bottom: 20px; }
.hero-sub {
font-size: 1.125rem;
color: var(–muted);
margin-bottom: 32px;
max-width: 520px;
}
.hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
/* Hero mockups */
.hero-visual {
position: relative;
min-height: 380px;
}
.mockup-stack {
position: relative;
width: 100%;
height: 380px;
}
.mockup-card {
position: absolute;
background: var(–white);
border-radius: var(–radius-lg);
box-shadow: var(–shadow-lg);
padding: 20px;
border: 1px solid var(–border);
}
.mockup-main {
width: 72%;
top: 20px;
left: 0;
z-index: 2;
}
.mockup-analytics {
width: 58%;
bottom: 0;
right: 0;
z-index: 3;
}
.mockup-label {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(–secondary);
margin-bottom: 14px;
}
.mockup-content {
display: flex;
gap: 14px;
align-items: center;
margin-bottom: 16px;
}
.mockup-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(–surface), var(–border));
flex-shrink: 0;
}
.mockup-lines { flex: 1; }
.mockup-lines .line {
height: 10px;
background: var(–surface);
border-radius: 4px;
margin-bottom: 8px;
}
.mockup-lines .line.short { width: 60%; }
.mockup-stat {
display: inline-block;
padding: 6px 12px;
background: rgba(196, 122, 44, 0.12);
color: var(–accent);
font-weight: 700;
font-size: 0.875rem;
border-radius: var(–radius-pill);
}
.chart-bars {
display: flex;
align-items: flex-end;
gap: 8px;
height: 80px;
margin-bottom: 14px;
}
.bar {
flex: 1;
height: var(–h);
background: linear-gradient(to top, var(–accent), #E8A96A);
border-radius: 4px 4px 0 0;
}
.analytics-stats {
display: flex;
gap: 20px;
}
.analytics-stats strong {
display: block;
font-family: var(–font-heading);
font-size: 1.25rem;
color: var(–accent);
}
.analytics-stats span {
font-size: 0.75rem;
color: var(–muted);
}
/* —- Stats Bar —- */
.stats-bar {
background: var(–white);
border-top: 1px solid var(–border);
border-bottom: 1px solid var(–border);
padding: 48px 0;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
text-align: center;
}
.stat-number {
font-family: var(–font-heading);
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 800;
color: var(–accent);
line-height: 1;
margin-bottom: 8px;
}
.stat-label {
font-size: 0.9375rem;
color: var(–muted);
font-weight: 500;
}
/* —- Goals —- */
.goals {
padding: 96px 0;
text-align: center;
}
.goals h2 { margin-bottom: 8px; }
.goal-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 48px;
}
.goal-card {
background: var(–white);
border: 2px solid var(–border);
border-radius: var(–radius-lg);
padding: 28px 20px;
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
text-align: center;
font-family: var(–font-body);
}
.goal-card:hover {
border-color: var(–secondary);
box-shadow: var(–shadow-sm);
}
.goal-card.active {
border-color: var(–accent);
box-shadow: 0 0 0 3px rgba(196, 122, 44, 0.15);
}
.goal-icon { font-size: 1.75rem; display: block; margin-bottom: 12px; }
.goal-title {
display: block;
font-family: var(–font-heading);
font-weight: 700;
font-size: 1rem;
color: var(–primary);
margin-bottom: 6px;
}
.goal-desc {
display: block;
font-size: 0.8125rem;
color: var(–muted);
line-height: 1.4;
}
.goal-result {
margin-top: 28px;
font-size: 1rem;
color: var(–muted);
}
.goal-result strong { color: var(–primary); }
/* —- Sections —- */
.section-alt {
background: var(–surface);
}
section h2 {
text-align: center;
margin-bottom: 8px;
}
/* —- Services —- */
.services {
padding: 96px 0;
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.service-card {
background: var(–white);
border-radius: var(–radius-lg);
padding: 28px;
border: 1px solid var(–border);
box-shadow: var(–shadow-sm);
transition: box-shadow 0.2s, transform 0.15s;
display: flex;
flex-direction: column;
}
.service-card:hover {
box-shadow: var(–shadow-md);
transform: translateY(-3px);
}
.service-tag {
display: inline-block;
padding: 4px 10px;
background: rgba(127, 118, 102, 0.12);
color: var(–secondary);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
border-radius: var(–radius-pill);
margin-bottom: 16px;
align-self: flex-start;
}
.service-icon { font-size: 1.5rem; margin-bottom: 12px; }
.service-card h3 { margin-bottom: 4px; }
.service-outcome {
font-size: 0.9375rem;
font-weight: 600;
color: var(–accent);
margin-bottom: 12px;
}
.service-desc {
font-size: 0.9375rem;
color: var(–muted);
flex: 1;
margin-bottom: 20px;
}
.service-price {
font-family: var(–font-heading);
font-weight: 700;
font-size: 1.125rem;
color: var(–primary);
margin-bottom: 16px;
}
.service-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 16px;
border-top: 1px solid var(–border);
}
.service-link {
font-weight: 600;
font-size: 0.875rem;
color: var(–primary);
}
.service-link:hover { color: var(–accent); }
.service-examples {
font-size: 0.8125rem;
color: var(–secondary);
font-weight: 500;
}
/* —- Process —- */
.process {
padding: 96px 0;
}
.process-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
margin-top: 56px;
}
.process-step {
position: relative;
}
.step-number {
font-family: var(–font-heading);
font-size: 3rem;
font-weight: 800;
color: var(–accent);
line-height: 1;
margin-bottom: 8px;
opacity: 0.85;
}
.process-step h3 {
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 2px solid rgba(196, 122, 44, 0.25);
}
.process-step p {
color: var(–muted);
font-size: 0.9375rem;
}
/* —- Pricing —- */
.pricing {
padding: 96px 0;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: start;
}
.pricing-card {
background: var(–white);
border-radius: var(–radius-lg);
padding: 36px 28px;
border: 1px solid var(–border);
position: relative;
text-align: center;
}
.pricing-card.featured {
border-color: var(–accent);
box-shadow: 0 0 0 3px rgba(196, 122, 44, 0.12), var(–shadow-md);
transform: scale(1.03);
}
.pricing-badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: var(–accent);
color: var(–white);
font-size: 0.75rem;
font-weight: 600;
padding: 5px 16px;
border-radius: var(–radius-pill);
white-space: nowrap;
}
.pricing-card h3 {
margin-bottom: 16px;
font-size: 1.125rem;
}
.pricing-amount {
font-family: var(–font-heading);
font-size: 3rem;
font-weight: 800;
color: var(–accent);
line-height: 1;
}
.pricing-amount .currency {
font-size: 1.5rem;
vertical-align: super;
}
.pricing-period {
color: var(–muted);
font-size: 0.875rem;
margin-bottom: 28px;
}
.pricing-features {
list-style: none;
text-align: left;
margin-bottom: 28px;
}
.pricing-features li {
padding: 8px 0;
font-size: 0.9375rem;
color: var(–text);
border-bottom: 1px solid var(–border);
padding-left: 24px;
position: relative;
}
.pricing-features li::before {
content: ‘✓’;
position: absolute;
left: 0;
color: var(–secondary);
font-weight: 700;
}
.pricing-note {
text-align: center;
margin-top: 40px;
color: var(–muted);
font-size: 0.9375rem;
}
/* —- Results —- */
.results {
padding: 96px 0;
}
.results-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 48px;
}
.testimonial {
background: var(–white);
border-radius: var(–radius-lg);
padding: 28px;
border: 1px solid var(–border);
box-shadow: var(–shadow-sm);
}
.testimonial p {
font-size: 0.9375rem;
color: var(–text);
line-height: 1.65;
margin-bottom: 16px;
font-style: italic;
}
.testimonial footer {
font-size: 0.8125rem;
color: var(–muted);
font-weight: 500;
}
.industries {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 40px;
}
.industries span {
padding: 8px 18px;
background: var(–surface);
border: 1px solid var(–border);
border-radius: var(–radius-pill);
font-size: 0.8125rem;
font-weight: 500;
color: var(–secondary);
}
/* —- Positioning —- */
.section-dark {
background: var(–primary);
color: var(–white);
}
.positioning {
padding: 96px 0;
}
.positioning-inner {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.positioning h2 {
color: var(–white);
margin-bottom: 24px;
}
.positioning p {
color: rgba(255, 255, 255, 0.75);
font-size: 1.0625rem;
margin-bottom: 16px;
line-height: 1.7;
}
.positioning strong { color: var(–white); }
.positioning .btn-primary { margin-top: 24px; }
/* —- FAQ —- */
.faq {
padding: 96px 0;
}
.faq-list {
max-width: 720px;
margin: 48px auto 0;
}
.faq-item {
background: var(–white);
border: 1px solid var(–border);
border-radius: var(–radius);
margin-bottom: 12px;
overflow: hidden;
}
.faq-item summary {
padding: 20px 24px;
font-weight: 600;
color: var(–primary);
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(–font-heading);
}
.faq-item summary::after {
content: ‘+’;
font-size: 1.25rem;
color: var(–accent);
font-weight: 400;
transition: transform 0.2s;
}
.faq-item[open] summary::after {
transform: rotate(45deg);
}
.faq-item p {
padding: 0 24px 20px;
color: var(–muted);
font-size: 0.9375rem;
line-height: 1.65;
}
/* —- Contact —- */
.contact {
padding: 96px 0;
background: var(–white);
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.contact-copy h2 { text-align: left; margin-bottom: 16px; }
.contact-copy p {
color: var(–muted);
margin-bottom: 24px;
}
.contact-perks {
list-style: none;
}
.contact-perks li {
padding: 8px 0 8px 28px;
position: relative;
color: var(–text);
font-size: 0.9375rem;
}
.contact-perks li::before {
content: ‘✓’;
position: absolute;
left: 0;
color: var(–accent);
font-weight: 700;
}
.contact-form {
background: var(–bg);
border: 1px solid var(–border);
border-radius: var(–radius-lg);
padding: 32px;
}
.form-row {
margin-bottom: 20px;
}
.form-row label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(–primary);
margin-bottom: 6px;
}
.form-row input,
.form-row select,
.form-row textarea {
width: 100%;
padding: 12px 16px;
border: 1px solid var(–border);
border-radius: 8px;
font-family: var(–font-body);
font-size: 0.9375rem;
color: var(–text);
background: var(–white);
transition: border-color 0.2s, box-shadow 0.2s;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
outline: none;
border-color: var(–accent);
box-shadow: 0 0 0 3px rgba(196, 122, 44, 0.15);
}
.form-row textarea { resize: vertical; min-height: 100px; }
/* —- Footer —- */
.site-footer {
background: var(–primary);
color: rgba(255, 255, 255, 0.7);
padding: 64px 0 0;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
padding-bottom: 48px;
}
.footer-logo {
filter: brightness(0) invert(1);
opacity: 0.9;
margin-bottom: 12px;
height: 36px;
width: auto;
}
.footer-brand p {
font-size: 0.875rem;
max-width: 240px;
}
.footer-links h4,
.footer-contact h4 {
color: var(–white);
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 16px;
font-family: var(–font-heading);
}
.footer-links {
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-links a,
.footer-contact a {
color: rgba(255, 255, 255, 0.65);
font-size: 0.875rem;
transition: color 0.2s;
}
.footer-links a:hover,
.footer-contact a:hover {
color: var(–accent);
}
.footer-contact p { font-size: 0.875rem; }
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 20px 0;
text-align: center;
font-size: 0.8125rem;
}
/* —- Responsive —- */
@media (max-width: 1024px) {
.hero-grid { grid-template-columns: 1fr; gap: 48px; }
.hero-visual { max-width: 480px; margin: 0 auto; }
.services-grid { grid-template-columns: repeat(2, 1fr); }
.pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
.pricing-card.featured { transform: none; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.nav-desktop, .nav-cta { display: none; }
.nav-toggle { display: flex; }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.goal-grid { grid-template-columns: repeat(2, 1fr); }
.services-grid { grid-template-columns: 1fr; }
.process-steps { grid-template-columns: 1fr; gap: 32px; }
.results-grid { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; gap: 40px; }
.footer-grid { grid-template-columns: 1fr; gap: 28px; }
.hero { padding: 48px 0 64px; }
.goals, .services, .process, .pricing, .results, .positioning, .faq, .contact {
padding: 64px 0;
}
}
@media (max-width: 480px) {
.goal-grid { grid-template-columns: 1fr; }
.hero-ctas { flex-direction: column; }
.hero-ctas .btn { width: 100%; }
}
/* Base styles: load css/styles.css in HTML before this file (file:// safe) */
:root {
–topbar-h: 36px;
–header-total: calc(var(–topbar-h) + var(–header-h));
}
html { scroll-padding-top: var(–header-total); }
/* —- Top bar —- */
.top-bar {
background: var(–primary);
color: rgba(255,255,255,0.85);
font-size: 0.8125rem;
height: var(–topbar-h);
display: flex;
align-items: center;
}
.top-bar-inner {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 0 24px;
gap: 16px;
}
.top-bar-msg { opacity: 0.75; }
.top-bar-links {
display: flex;
gap: 12px;
align-items: center;
}
.top-bar-links a {
display: inline-flex;
align-items: center;
gap: 6px;
color: #fff;
font-weight: 500;
padding: 4px 12px;
border-radius: var(–radius-pill);
transition: background 0.2s;
text-decoration: none;
}
.top-bar-links a:hover { background: rgba(255,255,255,0.12); color: #fff; }
.top-bar-links .whatsapp { background: rgba(37, 211, 102, 0.2); }
.top-bar-links .whatsapp:hover { background: rgba(37, 211, 102, 0.35); }
.top-bar-links .telegram { background: rgba(0, 136, 204, 0.2); }
.top-bar-links .telegram:hover { background: rgba(0, 136, 204, 0.35); }
.site-header.v2 { top: var(–topbar-h); }
.header-actions {
display: flex;
align-items: center;
gap: 10px;
margin-left: auto;
}
.lang-toggle {
display: flex;
border: 1px solid var(–border);
border-radius: var(–radius-pill);
overflow: hidden;
background: var(–white);
}
.lang-toggle button {
border: none;
background: transparent;
padding: 6px 12px;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
color: var(–muted);
font-family: var(–font-body);
transition: background 0.2s, color 0.2s;
}
.lang-toggle button.active {
background: var(–primary);
color: var(–white);
}
.btn-mockup {
background: transparent;
color: var(–accent);
border: 2px solid var(–accent);
font-size: 0.8125rem;
padding: 8px 16px;
}
.btn-mockup:hover {
background: var(–accent);
color: var(–white);
}
/* —- Hero v2 —- */
.hero.v2 {
padding: 56px 0 72px;
background: var(–primary);
color: var(–white);
}
.hero.v2 h1 { color: var(–white); }
.hero.v2 .hero-sub { color: rgba(255,255,255,0.72); }
.hero.v2 .badge {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.15);
color: rgba(255,255,255,0.8);
}
.hero-industries {
font-size: 0.8125rem;
color: rgba(255,255,255,0.5);
margin-top: 20px;
}
/* —- Configurator —- */
.configurator {
background: var(–white);
border-radius: 20px;
padding: 28px;
box-shadow: var(–shadow-lg);
color: var(–text);
}
.configurator-header { margin-bottom: 24px; }
.configurator-header h3 {
font-size: 1.25rem;
margin-bottom: 4px;
color: var(–primary);
}
.configurator-header p {
font-size: 0.875rem;
color: var(–muted);
}
.config-label {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(–secondary);
margin-bottom: 10px;
}
.product-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 24px;
}
.product-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 12px 8px;
border: 2px solid var(–border);
border-radius: var(–radius);
background: var(–bg);
cursor: pointer;
font-family: var(–font-body);
font-size: 0.6875rem;
font-weight: 600;
color: var(–muted);
transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.product-btn svg {
width: 22px;
height: 22px;
stroke: var(–secondary);
}
.product-btn.active {
border-color: var(–accent);
background: rgba(196, 122, 44, 0.08);
color: var(–primary);
}
.product-btn.active svg { stroke: var(–accent); }
.qty-control {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
}
.qty-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid var(–border);
background: var(–white);
font-size: 1.25rem;
cursor: pointer;
color: var(–primary);
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.2s, background 0.2s;
}
.qty-btn:hover:not(:disabled) {
border-color: var(–accent);
background: rgba(196, 122, 44, 0.08);
}
.qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.qty-value {
font-family: var(–font-heading);
font-size: 2rem;
font-weight: 800;
color: var(–primary);
min-width: 60px;
text-align: center;
}
.config-result {
background: var(–surface);
border-radius: var(–radius-lg);
padding: 20px;
margin-bottom: 20px;
}
.config-result-row {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 8px;
}
.config-result-row:last-child { margin-bottom: 0; }
.config-result-label {
font-size: 0.8125rem;
color: var(–muted);
}
.config-price {
font-family: var(–font-heading);
font-size: 2rem;
font-weight: 800;
color: var(–accent);
line-height: 1;
}
.config-delivery {
font-weight: 600;
color: var(–primary);
font-size: 0.9375rem;
}
.config-actions {
display: flex;
flex-direction: column;
gap: 10px;
}
.config-actions .btn-whatsapp {
background: transparent;
color: #25D366;
border: none;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
padding: 8px;
font-family: var(–font-body);
}
.config-actions .btn-whatsapp:hover { text-decoration: underline; }
.config-actions .btn-mockup-inline {
font-size: 0.8125rem;
color: var(–secondary);
background: none;
border: none;
cursor: pointer;
font-family: var(–font-body);
text-decoration: underline;
}
/* —- Trust bar (honest) —- */
.trust-bar {
background: var(–white);
border-bottom: 1px solid var(–border);
padding: 20px 0;
}
.trust-items {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 32px;
}
.trust-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.875rem;
font-weight: 600;
color: var(–primary);
}
.trust-item svg {
width: 18px;
height: 18px;
stroke: var(–accent);
flex-shrink: 0;
}
/* —- Portfolio strip —- */
.portfolio {
padding: 80px 0;
background: var(–white);
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 48px;
}
.portfolio-card {
border-radius: var(–radius-lg);
overflow: hidden;
background: var(–surface);
border: 1px solid var(–border);
transition: transform 0.2s, box-shadow 0.2s;
}
.portfolio-card:hover {
transform: translateY(-4px);
box-shadow: var(–shadow-md);
}
.portfolio-visual {
height: 160px;
position: relative;
display: flex;
align-items: flex-end;
padding: 16px;
}
.portfolio-visual.p1 { background: linear-gradient(135deg, #2d3a4a 0%, #1E252C 100%); }
.portfolio-visual.p2 { background: linear-gradient(135deg, #4a6741 0%, #2d4a35 100%); }
.portfolio-visual.p3 { background: linear-gradient(135deg, #5c4a3a 0%, #3d2e24 100%); }
.portfolio-visual.p4 { background: linear-gradient(135deg, #3a4a5c 0%, #243040 100%); }
.portfolio-metric {
background: var(–accent);
color: var(–white);
font-size: 0.75rem;
font-weight: 700;
padding: 5px 12px;
border-radius: var(–radius-pill);
}
.portfolio-body {
padding: 16px;
}
.portfolio-tag {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(–secondary);
margin-bottom: 4px;
}
.portfolio-body p {
font-size: 0.8125rem;
color: var(–muted);
}
/* —- Metaphor —- */
.metaphor {
padding: 0;
overflow: hidden;
}
.metaphor-grid {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 420px;
}
.metaphor-visual {
background: linear-gradient(160deg, #1a3a4a 0%, #0d2030 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.bucket-scene {
width: 280px;
height: 280px;
position: relative;
}
.bucket {
width: 140px;
height: 120px;
background: linear-gradient(90deg, #2a8a9a, #3ab0c4);
border-radius: 8px 8px 20px 20px;
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
box-shadow: inset -10px 0 20px rgba(0,0,0,0.2);
}
.bucket::before {
content: ”;
position: absolute;
top: -8px;
left: 20px;
right: 20px;
height: 12px;
background: #248a9a;
border-radius: 4px;
}
.water-splash {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 120px;
}
.water-drop {
position: absolute;
width: 8px;
height: 14px;
background: #4dd0e8;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
opacity: 0.8;
animation: drip 2s ease-in-out infinite;
}
.water-drop:nth-child(1) { left: 30%; top: 10px; animation-delay: 0s; }
.water-drop:nth-child(2) { left: 50%; top: 0; animation-delay: 0.3s; width: 10px; height: 18px; }
.water-drop:nth-child(3) { left: 65%; top: 15px; animation-delay: 0.6s; }
.water-drop:nth-child(4) { left: 40%; top: 30px; animation-delay: 0.9s; }
.water-drop:nth-child(5) { left: 55%; top: 25px; animation-delay: 1.2s; }
@keyframes drip {
0%, 100% { transform: translateY(0) scale(1); opacity: 0.9; }
50% { transform: translateY(20px) scale(0.8); opacity: 0.4; }
}
.metaphor-copy {
padding: 64px 48px;
display: flex;
flex-direction: column;
justify-content: center;
background: var(–white);
}
.metaphor-copy h2 {
margin-bottom: 20px;
font-size: clamp(1.5rem, 2.5vw, 2rem);
}
.metaphor-copy p {
color: var(–muted);
margin-bottom: 16px;
font-size: 1.0625rem;
line-height: 1.7;
}
/* —- Service icons (no emoji) —- */
.service-icon-svg {
width: 44px;
height: 44px;
background: rgba(196, 122, 44, 0.1);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.service-icon-svg svg {
width: 22px;
height: 22px;
stroke: var(–accent);
}
/* —- Approach cards (not fake testimonials) —- */
.approach-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 48px;
}
.approach-card {
background: var(–white);
border: 1px solid var(–border);
border-radius: var(–radius-lg);
padding: 28px;
box-shadow: var(–shadow-sm);
}
.approach-card h3 {
font-size: 1.0625rem;
margin-bottom: 12px;
}
.approach-card p {
font-size: 0.9375rem;
color: var(–muted);
line-height: 1.65;
margin-bottom: 16px;
}
.approach-tag {
display: inline-block;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(–accent);
background: rgba(196, 122, 44, 0.1);
padding: 4px 10px;
border-radius: var(–radius-pill);
}
/* —- Modal —- */
.modal {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s, visibility 0.25s;
}
.modal.open {
opacity: 1;
visibility: visible;
}
.modal-backdrop {
position: absolute;
inset: 0;
background: rgba(30, 37, 44, 0.6);
backdrop-filter: blur(4px);
}
.modal-panel {
position: relative;
background: var(–white);
border-radius: 20px;
padding: 36px;
max-width: 480px;
width: 100%;
box-shadow: var(–shadow-lg);
transform: translateY(16px);
transition: transform 0.25s;
}
.modal.open .modal-panel { transform: translateY(0); }
.modal-close {
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
border: none;
background: var(–surface);
border-radius: 50%;
font-size: 1.25rem;
cursor: pointer;
color: var(–muted);
display: flex;
align-items: center;
justify-content: center;
}
.modal-panel h2 {
margin-bottom: 8px;
padding-right: 40px;
}
.modal-panel > p {
color: var(–muted);
font-size: 0.9375rem;
margin-bottom: 24px;
}
.mockup-form .form-row { margin-bottom: 16px; }
/* —- Reveal animation —- */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* —- Footer v2 —- */
.footer-wordmark {
font-family: var(–font-heading);
font-weight: 800;
font-size: 1.25rem;
color: var(–white);
letter-spacing: 0.04em;
margin-bottom: 8px;
}
.footer-wordmark span {
display: block;
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.2em;
color: rgba(255,255,255,0.5);
margin-top: 2px;
}
/* —- Mockup Offer (Hormozi) —- */
.mockup-offer {
padding: 96px 0;
background: linear-gradient(180deg, var(–surface) 0%, var(–white) 40%, var(–surface) 100%);
}
.offer-header {
max-width: 720px;
margin: 0 auto 48px;
text-align: center;
}
.offer-badge {
display: inline-block;
padding: 6px 16px;
background: var(–accent);
color: var(–white);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: var(–radius-pill);
margin-bottom: 20px;
}
.offer-header h2 {
margin-bottom: 20px;
font-size: clamp(1.75rem, 3.5vw, 2.75rem);
}
.offer-dream {
font-size: 1.125rem;
color: var(–text);
line-height: 1.7;
margin-bottom: 16px;
font-weight: 500;
}
.offer-pain {
font-size: 1rem;
color: var(–muted);
line-height: 1.65;
}
.offer-value-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 48px;
}
.offer-value-card {
background: var(–white);
border: 1px solid var(–border);
border-radius: var(–radius-lg);
padding: 24px 20px;
text-align: center;
box-shadow: var(–shadow-sm);
}
.offer-value-icon {
width: 44px;
height: 44px;
margin: 0 auto 12px;
background: rgba(196, 122, 44, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.offer-value-icon svg {
width: 20px;
height: 20px;
stroke: var(–accent);
}
.offer-value-card h4 {
font-size: 0.875rem;
font-weight: 700;
color: var(–primary);
margin-bottom: 6px;
}
.offer-value-card p {
font-size: 0.8125rem;
color: var(–muted);
line-height: 1.45;
}
.offer-body {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 40px;
margin-bottom: 48px;
align-items: start;
}
.offer-stack {
background: var(–white);
border: 1px solid var(–border);
border-radius: var(–radius-lg);
padding: 32px;
box-shadow: var(–shadow-md);
}
.offer-stack h3 {
font-size: 1.125rem;
margin-bottom: 24px;
color: var(–primary);
}
.offer-stack-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 20px;
}
.offer-stack-list li {
display: flex;
gap: 14px;
align-items: flex-start;
}
.stack-check {
flex-shrink: 0;
width: 28px;
height: 28px;
background: rgba(196, 122, 44, 0.12);
color: var(–accent);
font-weight: 700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
}
.offer-stack-list strong {
display: block;
font-size: 0.9375rem;
color: var(–primary);
margin-bottom: 4px;
}
.offer-stack-list p {
font-size: 0.875rem;
color: var(–muted);
line-height: 1.5;
}
.offer-feelings {
display: flex;
align-items: stretch;
gap: 16px;
}
.feeling-col {
flex: 1;
padding: 24px;
border-radius: var(–radius-lg);
}
.feeling-before {
background: rgba(30, 37, 44, 0.06);
border: 1px dashed var(–border);
}
.feeling-after {
background: rgba(196, 122, 44, 0.08);
border: 1px solid rgba(196, 122, 44, 0.25);
}
.feeling-col h4 {
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 16px;
color: var(–primary);
}
.feeling-after h4 { color: var(–accent); }
.feeling-col ul {
list-style: none;
}
.feeling-col li {
font-size: 0.875rem;
color: var(–muted);
padding: 8px 0;
padding-left: 16px;
position: relative;
line-height: 1.45;
}
.feeling-before li::before {
content: ‘×’;
position: absolute;
left: 0;
color: #9CA3AF;
font-weight: 700;
}
.feeling-after li::before {
content: ‘✓’;
position: absolute;
left: 0;
color: var(–accent);
font-weight: 700;
}
.feeling-arrow {
display: flex;
align-items: center;
font-size: 1.5rem;
color: var(–accent);
font-weight: 700;
padding-top: 48px;
}
.offer-cta-block {
text-align: center;
max-width: 560px;
margin: 0 auto;
}
.offer-guarantee {
font-size: 0.9375rem;
color: var(–muted);
margin-bottom: 20px;
}
.btn-lg {
padding: 18px 36px;
font-size: 1.0625rem;
}
.offer-scarcity {
font-size: 0.8125rem;
color: var(–secondary);
margin-top: 14px;
font-style: italic;
}
.modal-stack-preview {
list-style: none;
margin-bottom: 24px;
padding: 16px;
background: var(–surface);
border-radius: var(–radius);
}
.modal-stack-preview li {
font-size: 0.875rem;
color: var(–text);
padding: 6px 0;
font-weight: 500;
}
/* —- Responsive v2 —- */
@media (max-width: 1024px) {
.portfolio-grid { grid-template-columns: repeat(2, 1fr); }
.product-grid { grid-template-columns: repeat(2, 1fr); }
.metaphor-grid { grid-template-columns: 1fr; }
.metaphor-visual { min-height: 280px; }
.approach-grid { grid-template-columns: 1fr; }
.offer-value-grid { grid-template-columns: repeat(2, 1fr); }
.offer-body { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.top-bar-msg { display: none; }
.btn-mockup { display: none; }
.offer-feelings { flex-direction: column; }
.feeling-arrow { display: none; }
.offer-value-grid { grid-template-columns: 1fr; }
.mockup-offer { padding: 64px 0; }
.header-actions .nav-cta { display: none; }
.product-grid { grid-template-columns: repeat(2, 1fr); }
.portfolio-grid { grid-template-columns: 1fr; }
.metaphor-copy { padding: 40px 24px; }
}
@media (max-width: 480px) {
.product-grid { grid-template-columns: 1fr 1fr; }
.lang-toggle button { padding: 6px 10px; }
}
/* styles.css + styles2.css loaded via in index3.html */
/* —- Hero v3: mockup-focused, no configurator —- */
.hero.v3 .hero-grid {
grid-template-columns: 1fr 1fr;
align-items: center;
}
.hero-ctas-v3 {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
margin-top: 28px;
}
.hero-cta-note {
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.55);
}
.hero-visual-v3 {
display: flex;
justify-content: center;
}
.mockup-preview {
width: 100%;
max-width: 420px;
background: var(–white);
border-radius: 16px;
overflow: hidden;
box-shadow: var(–shadow-lg);
border: 1px solid var(–border);
}
.mockup-preview-bar {
background: var(–surface);
padding: 10px 14px;
display: flex;
gap: 6px;
border-bottom: 1px solid var(–border);
}
.mockup-preview-bar span {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(–border);
}
.mockup-preview-bar span:first-child { background: #FCA5A5; }
.mockup-preview-bar span:nth-child(2) { background: #FCD34D; }
.mockup-preview-bar span:nth-child(3) { background: #86EFAC; }
.mockup-preview-body {
padding: 24px;
color: var(–text);
}
.mockup-preview-label {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(–accent);
margin-bottom: 12px;
}
.mockup-preview h4 {
font-size: 1rem;
color: var(–primary);
margin-bottom: 8px;
}
.mockup-preview-line {
height: 8px;
background: var(–surface);
border-radius: 4px;
margin-bottom: 8px;
}
.mockup-preview-line.short { width: 65%; }
.mockup-preview-cta-fake {
display: inline-block;
margin-top: 16px;
padding: 10px 20px;
background: var(–accent);
color: var(–white);
font-size: 0.75rem;
font-weight: 600;
border-radius: var(–radius-pill);
}
.mockup-preview-badge {
margin-top: 16px;
padding: 8px 12px;
background: rgba(196, 122, 44, 0.12);
color: var(–accent);
font-size: 0.75rem;
font-weight: 700;
border-radius: 8px;
text-align: center;
}
/* Single CTA header */
.header-actions .nav-cta { display: none; }
/* Reveal: visible by default; animate only when JS runs */
html.js .reveal {
opacity: 0;
transform: translateY(24px);
}
html.js .reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* SVG icons need explicit stroke */
.trust-item svg,
.niche-card-icon svg,
.offer-value-icon svg {
fill: none;
stroke: var(–accent);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Mobile: tuck header CTA into menu */
@media (max-width: 768px) {
.header-actions > .btn-primary {
display: none;
}
}
/* Who we help */
.who-help {
padding: 80px 0;
background: var(–white);
}
.who-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 48px;
}
.niche-card {
background: var(–bg);
border: 1px solid var(–border);
border-radius: var(–radius-lg);
padding: 32px;
transition: box-shadow 0.2s, border-color 0.2s;
}
.niche-card:hover {
border-color: var(–accent);
box-shadow: var(–shadow-md);
}
.niche-card-icon {
width: 48px;
height: 48px;
background: rgba(196, 122, 44, 0.1);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.niche-card-icon svg {
width: 24px;
height: 24px;
stroke: var(–accent);
}
.niche-card h3 {
margin-bottom: 6px;
}
.niche-outcome {
font-size: 0.9375rem;
font-weight: 600;
color: var(–accent);
margin-bottom: 12px;
}
.niche-card > p {
font-size: 0.9375rem;
color: var(–muted);
line-height: 1.6;
margin-bottom: 16px;
}
.niche-fix {
font-size: 0.8125rem;
color: var(–secondary);
padding-top: 16px;
border-top: 1px solid var(–border);
font-style: italic;
}
/* Pricing path (linear) */
.pricing-path {
padding: 80px 0;
}
.pricing-steps {
display: flex;
flex-direction: column;
gap: 0;
max-width: 640px;
margin: 48px auto 0;
}
.pricing-step {
display: grid;
grid-template-columns: 80px 1fr auto;
gap: 24px;
align-items: center;
padding: 28px 0;
border-bottom: 1px solid var(–border);
}
.pricing-step:last-child { border-bottom: none; }
.pricing-step-label {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(–secondary);
}
.pricing-step:first-child .pricing-step-label { color: var(–accent); }
.pricing-step h3 {
font-size: 1.0625rem;
margin-bottom: 4px;
}
.pricing-step p {
font-size: 0.875rem;
color: var(–muted);
}
.pricing-step-price {
font-family: var(–font-heading);
font-size: 1.5rem;
font-weight: 800;
color: var(–accent);
white-space: nowrap;
}
.pricing-step:first-child .pricing-step-price {
font-size: 2rem;
}
.pricing-path-cta {
text-align: center;
margin-top: 40px;
}
/* Contact mockup-first */
.contact-form .form-row-url { order: -1; }
@media (max-width: 1024px) {
.hero.v3 .hero-grid { grid-template-columns: 1fr; }
.hero-visual-v3 { order: -1; max-width: 360px; margin: 0 auto 24px; }
.who-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.pricing-step {
grid-template-columns: 1fr;
gap: 8px;
text-align: center;
}
.pricing-step-price { justify-self: center; }
}
Real Estate & Clinics · Costa del Sol
Get a website that actually brings leads — starting free.
We help real estate agents and clinics on the Costa del Sol turn outdated sites into lead machines. See your upgraded homepage in 72 hours — before you spend a euro.
Paste your URL · Delivered in 72h · No card required
Your free mockup preview
Your Business — upgraded for leads
Book / Enquire →
Delivered in 72 hours · Free
Who we help
We only work with two industries — on purpose.
Specialists convert better than generalists. We know exactly what agents and clinics need.
Real Estate Agents
More property enquiries via WhatsApp Stop relying only on portals. We build enquiry pages that capture buyers and sellers directly — with ads that drive traffic there. We fix: weak property pages, no WhatsApp capture, ads pointing nowhere
Clinics & Wellness
More appointment requests Stop posting on Instagram hoping for bookings. We build trust-first pages and funnels that turn visitors into patients. We fix: pretty sites with no booking flow, ad spend with no tracking
Free offer
See your website converting leads — before you spend a euro.
Imagine waking up to WhatsApp enquiries, a fuller calendar, and a website you’re finally proud to send people to. You’ll see exactly what that looks like — on your business, with your branding — within 72 hours.
Most agents and clinic owners know their site isn’t working. They just don’t know what to fix first. Agencies quote thousands before showing you anything. We flip that.
Dream outcome
A site that pulls leads while you run the business
You’ll believe it
See the mockup before paying — not promises
Fast
Delivered within 72 hours
Zero effort
Paste your URL. We do the thinking.
What you get — 100% free
✓ Conversion mockup of your homepage — Your logo, your offer, laid out to convert — not win design awards.
✓ 3-point strategy breakdown — What’s costing you leads, what to fix first, what impact to expect.
✓ Quick-win action list — Changes you can make this week — even if you never hire us.
✓ 15-min walkthrough call — We walk you through the mockup. No pressure.
Right now you feel…
Embarrassed sending people to your site
Burning money on ads that go nowhere
Guessing what to fix next
After the mockup you’ll feel…
Clarity — you know exactly what’s broken
Confidence — you’ve seen the upgraded version
Control — a plan you can act on today
No credit card. No contract. Keep the strategy even if you don’t hire us.
Limited to 5 mockups per month — founder-led, every one gets real attention.
How it works
From free mockup to live leads
01
Request your free mockup
Paste your URL. Within 72 hours you get a conversion-focused redesign of your homepage plus a clear strategy.
02
Approve and we build
Love the direction? We build your landing page or site improvements with proper tracking from day one.
03
Launch ads that convert
We drive traffic with AI ads and content — optimised for enquiries, not vanity metrics.
Running ads without a converting page is like pouring budget into a leaky bucket.
Agents and clinics spend thousands on traffic that never books or enquires. We fix the full chain — page, capture, follow-up.
What happens after
Simple path — only if you love the mockup
The mockup is free. These are optional next steps — no pressure.
Step 0: Free Mockup + Strategy — Homepage mockup, 3-point strategy, quick-wins, 15-min call (€0)
Step 1: Conversion Landing Page — We build the page you approved in the mockup — mobile-ready, WhatsApp capture, tracking (From €497)
Step 2: Ads + Content to Drive Leads — AI ads and posts that send traffic to your new page — managed and optimised (From €197/mo)
If you only want a pretty website, we’re not the best fit.
Yes, we make professional pages. But that’s the minimum.
We build for one thing: enquiries and appointments. If that’s what you need, start with the free mockup.
FAQ
Common questions
Do you only work with real estate and clinics?¿Solo trabajáis con inmobiliaria y clínicas?
Yes — on purpose. We specialise so we can deliver faster results. If you’re an agent or clinic owner on the Costa del Sol, we’re built for you.
What’s in the free mockup?¿Qué incluye el mockup gratis?
A conversion-focused homepage redesign with your branding, a 3-point strategy, quick-win actions, and a 15-min walkthrough. Delivered in 72 hours. No card, no contract.
Do I have to hire you after?¿Tengo que contrataros después?
No. Keep the strategy and mockup either way. Most clients who love the mockup choose to build the landing page (from €497) — but there’s zero pressure.
English and Spanish?¿Inglés y español?
Yes. Mockups, pages, and ads in both languages for the Costa del Sol market.
Get your mockup
Paste your URL — we’ll do the rest
Get your mockup
• Free mockup in 72 hours
• Strategy you keep — no obligation
• English & Spanish