.thelis-retromind {
--thelis-ff-display: 'Syne', sans-serif;
--thelis-ff-mono:    'JetBrains Mono', monospace;
--thelis-ff-title:   'Cormorant Garamond', Georgia, serif;
--rm-accent:    #b14eff; --rm-accent-2:  #ff2d95; --rm-accent-3:  #00f0ff; --rm-grad:      linear-gradient(100deg, #b14eff 0%, #ff2d95 100%);
--rm-ink:       #13082b; --rm-ink-2:     #1d0f3d; --rm-light:     #f6f3fc; --rm-white:     #ffffff;
--rm-text:      #13082b;
--rm-gray:      rgba(19, 8, 43, 0.56);
--rm-border:    rgba(19, 8, 43, 0.10);
--rm-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
--rm-ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
overflow-x: hidden;
max-width: none !important;
padding: 0 !important;
margin-top: 0 !important;
font-family: var(--thelis-ff-display);
} #primary.thelis-retromind .rm-hero,
#primary.thelis-retromind .rm-how,
#primary.thelis-retromind .rm-cta,
#primary .rm-hero,
#primary .rm-how,
#primary .rm-cta {
background: #13082b !important;
}
#primary.thelis-retromind .rm-problem,
#primary.thelis-retromind .rm-benefits,
#primary .rm-problem,
#primary .rm-benefits {
background: #f6f3fc !important;
}
#primary.thelis-retromind .rm-features,
#primary.thelis-retromind .rm-testimonials,
#primary.thelis-retromind .rm-trust,
#primary .rm-features,
#primary .rm-testimonials,
#primary .rm-trust {
background: #ffffff !important;
} @keyframes rmBlurUp {
from { opacity: 0; transform: translateY(48px); filter: blur(14px); }
to   { opacity: 1; transform: translateY(0);    filter: blur(0);    }
}
@keyframes rmFloat {
0%, 100% { transform: translateY(0); }
50%      { transform: translateY(-10px); }
}
@keyframes rmGlowPulse {
0%, 100% { opacity: 0.5; }
50%      { opacity: 1; }
}
@keyframes rmShimmer {
from { left: -100%; }
to   { left: 200%; }
} .rm-label {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--thelis-ff-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--rm-accent);
margin-bottom: 22px;
}
.rm-label::before {
content: '';
width: 36px; height: 1px;
background: var(--rm-accent);
opacity: 0.7;
flex-shrink: 0;
}
.rm-label--light { color: #c89bff; }
.rm-section-title {
font-family: var(--thelis-ff-display) !important;
font-size: clamp(30px, 4.4vw, 56px);
font-weight: 700;
letter-spacing: -2px;
line-height: 1.07;
color: var(--rm-text) !important;
margin: 0 0 24px;
}
.rm-section-title--light { color: var(--rm-white) !important; }
.rm-section-title em {
font-style: normal;
background: var(--rm-grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--rm-accent);
}
.rm-section-lead {
font-family: var(--thelis-ff-display);
font-size: clamp(16px, 1.6vw, 19px);
font-weight: 300;
line-height: 1.7;
color: var(--rm-gray);
max-width: 660px;
margin: 0 0 56px;
}
.rm-section-lead--light { color: rgba(255, 255, 255, 0.74) !important; } .rm-btn {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--thelis-ff-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
text-decoration: none !important;
padding: 15px 32px;
border-radius: 4px;
position: relative;
overflow: hidden;
transition: transform 0.3s var(--rm-spring), box-shadow 0.25s ease, background 0.25s ease;
}
.rm-btn--primary {
background: var(--rm-grad);
color: #ffffff !important;
box-shadow: 0 8px 28px rgba(177, 78, 255, 0.35);
}
.rm-btn--primary::after {
content: '';
position: absolute;
top: 0; left: -60%;
width: 40%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
transform: skewX(-15deg);
}
.rm-btn--primary:hover {
transform: translateY(-3px);
box-shadow: 0 14px 40px rgba(255, 45, 149, 0.42);
color: #ffffff !important;
}
.rm-btn--primary:hover::after { animation: rmShimmer 0.6s ease forwards; }
.rm-btn--ghost {
background: transparent;
border: 1.5px solid rgba(255, 255, 255, 0.26);
color: rgba(255, 255, 255, 0.88) !important;
}
.rm-btn--ghost:hover {
border-color: var(--rm-accent-3);
color: #ffffff !important;
transform: translateY(-3px);
}
.rm-btn--ghost-dark {
background: transparent;
border: 1.5px solid var(--rm-border);
color: var(--rm-text) !important;
}
.rm-btn--ghost-dark:hover {
border-color: var(--rm-accent);
color: var(--rm-accent) !important;
transform: translateY(-3px);
} .rm-problem::after,
.rm-features::after,
.rm-how::after,
.rm-benefits::after,
.rm-testimonials::after,
.rm-cta::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--rm-accent), var(--rm-accent-2) 50%, transparent);
z-index: 3;
} .rm-problem, .rm-features, .rm-how, .rm-benefits, .rm-testimonials {
position: relative;
padding: 120px 0;
} .rm-hero {
background: var(--rm-ink);
position: relative;
padding: 150px 0 110px;
overflow: hidden;
}
.rm-hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 78% 22%, rgba(177, 78, 255, 0.30), transparent 45%),
radial-gradient(circle at 92% 70%, rgba(255, 45, 149, 0.22), transparent 40%),
radial-gradient(circle at 12% 85%, rgba(0, 240, 255, 0.14), transparent 45%);
pointer-events: none;
z-index: 0;
}
.rm-hero::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 30px 30px;
pointer-events: none;
z-index: 0;
opacity: 0.5;
}
.rm-hero .container { position: relative; z-index: 2; }
.rm-hero__layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.rm-breadcrumb {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--thelis-ff-mono);
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 48px;
animation: rmBlurUp 0.7s var(--rm-ease-out) 0.05s both;
}
.rm-breadcrumb a { color: rgba(255, 255, 255, 0.65) !important; text-decoration: none !important; transition: color 0.2s; }
.rm-breadcrumb a:hover  { color: #ffffff !important; }
.rm-breadcrumb__sep     { color: rgba(255, 255, 255, 0.32) !important; }
.rm-breadcrumb__current { color: var(--rm-accent-3) !important; }
.rm-hero__logo {
display: block;
width: auto;
height: clamp(44px, 5vw, 60px);
margin-bottom: 26px;
animation: rmBlurUp 0.8s var(--rm-ease-out) 0.10s both;
}
.rm-hero__image {
position: relative;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.10);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.rm-hero__image::after {
content: '';
position: absolute;
inset: 0;
box-shadow: inset 0 0 0 1px rgba(177, 78, 255, 0.18);
border-radius: 14px;
pointer-events: none;
}
.rm-hero__image img {
display: block;
width: 100%;
height: auto;
}
.rm-hero__pill {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--thelis-ff-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: #ffffff !important;
padding: 7px 14px;
border-radius: 100px;
border: 1px solid rgba(177, 78, 255, 0.5);
background: rgba(177, 78, 255, 0.12);
margin-bottom: 26px;
animation: rmBlurUp 0.8s var(--rm-ease-out) 0.12s both;
}
.rm-hero__pill .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--rm-accent-3);
box-shadow: 0 0 8px var(--rm-accent-3);
animation: rmGlowPulse 1.8s ease-in-out infinite;
}
.rm-hero__title {
font-family: var(--thelis-ff-display) !important;
font-size: clamp(42px, 5.4vw, 76px);
font-weight: 800;
letter-spacing: -2.5px;
line-height: 1.02;
color: #ffffff !important;
margin: 0 0 24px;
animation: rmBlurUp 1.2s var(--rm-ease-out) 0.22s both;
}
.rm-hero__title em {
font-style: normal;
background: var(--rm-grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.rm-hero__subtitle {
font-family: var(--thelis-ff-display);
font-size: clamp(16px, 1.7vw, 20px);
font-weight: 300;
color: rgba(255, 255, 255, 0.78) !important;
line-height: 1.65;
max-width: 520px;
margin: 0 0 36px;
animation: rmBlurUp 0.9s var(--rm-ease-out) 0.42s both;
}
.rm-hero__cta {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 22px;
animation: rmBlurUp 0.9s var(--rm-ease-out) 0.56s both;
}
.rm-hero__note {
font-family: var(--thelis-ff-mono);
font-size: 11px;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.5) !important;
animation: rmBlurUp 0.9s var(--rm-ease-out) 0.66s both;
} .rm-hero__visual {
position: relative;
animation: rmBlurUp 1.1s var(--rm-ease-out) 0.5s both;
}
.rm-mockup {
position: relative;
border-radius: 12px;
background: var(--rm-ink-2);
border: 1px solid rgba(255, 255, 255, 0.10);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
padding: 18px;
overflow: hidden;
}
.rm-mockup__bar {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 16px;
}
.rm-mockup__bar i {
width: 9px; height: 9px; border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
display: inline-block;
}
.rm-mockup__bar i:nth-child(1) { background: #ff5f56; }
.rm-mockup__bar i:nth-child(2) { background: #ffbd2e; }
.rm-mockup__bar i:nth-child(3) { background: #5dff8f; }
.rm-mockup__cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.rm-mockup__col {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 8px;
padding: 12px 10px;
min-height: 220px;
}
.rm-mockup__coltitle {
font-family: var(--thelis-ff-mono);
font-size: 9px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 10px;
}
.rm-mockup__card {
background: rgba(255, 255, 255, 0.06);
border-radius: 6px;
padding: 10px;
margin-bottom: 8px;
}
.rm-mockup__card span {
display: block;
height: 5px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.22);
margin-bottom: 5px;
}
.rm-mockup__card span:last-child { width: 60%; margin-bottom: 0; }
.rm-mockup__card--hot { border-left: 2px solid var(--rm-accent); }
.rm-mockup__vote {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 6px;
font-family: var(--thelis-ff-mono);
font-size: 9px;
color: var(--rm-accent-3);
}
.rm-mockup__badge {
position: absolute;
top: 56px; right: -14px;
background: var(--rm-grad);
color: #fff;
font-family: var(--thelis-ff-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
padding: 8px 14px;
border-radius: 6px;
box-shadow: 0 10px 28px rgba(255, 45, 149, 0.4);
animation: rmFloat 4s ease-in-out infinite;
} .rm-trust {
position: relative;
padding: 56px 0;
border-bottom: 1px solid var(--rm-border);
}
.rm-trust__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
}
.rm-trust__claim {
font-family: var(--thelis-ff-title);
font-style: italic;
font-size: clamp(20px, 2.4vw, 30px);
font-weight: 600;
color: var(--rm-text);
line-height: 1.2;
flex: 1 1 360px;
}
.rm-trust__stats {
display: flex;
gap: 40px;
flex-wrap: wrap;
}
.rm-stat__val {
font-family: var(--thelis-ff-display);
font-size: clamp(28px, 3vw, 40px);
font-weight: 800;
letter-spacing: -1px;
background: var(--rm-grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
display: block;
line-height: 1;
}
.rm-stat__label {
font-family: var(--thelis-ff-mono);
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--rm-gray);
margin-top: 8px;
display: block;
} .rm-problem__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: start;
}
.rm-problem__lead p {
font-family: var(--thelis-ff-display);
font-size: 16px;
font-weight: 300;
line-height: 1.8;
color: var(--rm-gray);
margin: 0 0 18px;
}
.rm-pains {
display: flex;
flex-direction: column;
gap: 14px;
}
.rm-pain {
display: grid;
grid-template-columns: 40px 1fr;
gap: 16px;
align-items: start;
background: var(--rm-white);
border: 1px solid var(--rm-border);
border-radius: 8px;
padding: 20px 22px;
transition: transform 0.4s var(--rm-spring), box-shadow 0.25s ease;
}
.rm-pain:hover { transform: translateX(4px); box-shadow: 0 12px 32px rgba(19, 8, 43, 0.07); }
.rm-pain__icon {
width: 40px; height: 40px;
border-radius: 8px;
background: rgba(177, 78, 255, 0.10);
color: var(--rm-accent);
display: flex; align-items: center; justify-content: center;
}
.rm-pain__icon svg { width: 22px; height: 22px; }
.rm-pain h3 {
font-family: var(--thelis-ff-display);
font-size: 16px;
font-weight: 700;
color: var(--rm-text);
margin: 0 0 5px;
}
.rm-pain p {
font-family: var(--thelis-ff-display);
font-size: 14px;
font-weight: 300;
line-height: 1.55;
color: var(--rm-gray);
margin: 0;
} .rm-feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 96px;
}
.rm-feature:last-child { margin-bottom: 0; }
.rm-feature:nth-child(even) .rm-feature__media { order: -1; }
.rm-feature__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--thelis-ff-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--rm-accent-2);
margin-bottom: 16px;
}
.rm-feature__eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--rm-accent-2); }
.rm-feature h3 {
font-family: var(--thelis-ff-display);
font-size: clamp(24px, 3vw, 36px);
font-weight: 700;
letter-spacing: -1px;
color: var(--rm-text);
margin: 0 0 16px;
line-height: 1.12;
}
.rm-feature > div > p {
font-family: var(--thelis-ff-display);
font-size: 16px;
font-weight: 300;
line-height: 1.7;
color: var(--rm-gray);
margin: 0 0 22px;
max-width: 480px;
}
.rm-feature__list {
list-style: none;
padding: 0; margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.rm-feature__list li {
font-family: var(--thelis-ff-display);
font-size: 15px;
color: var(--rm-text);
padding-left: 28px;
position: relative;
}
.rm-feature__list li::before {
content: '';
position: absolute;
left: 0; top: 7px;
width: 14px; height: 14px;
border-radius: 50%;
background: var(--rm-grad);
box-shadow: 0 0 0 4px rgba(177, 78, 255, 0.12);
}
.rm-feature__media {
position: relative;
border-radius: 12px;
background: var(--rm-ink);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 24px 60px rgba(19, 8, 43, 0.18);
padding: 28px;
overflow: hidden;
min-height: 280px;
}
.rm-feature__media::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 70% 25%, rgba(177, 78, 255, 0.25), transparent 55%);
pointer-events: none;
}
.rm-feature__media svg { position: relative; z-index: 1; width: 100%; height: auto; display: block; } .rm-how { overflow: hidden; }
.rm-how::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 20% 30%, rgba(0, 240, 255, 0.12), transparent 45%),
radial-gradient(circle at 85% 75%, rgba(255, 45, 149, 0.16), transparent 45%);
pointer-events: none;
z-index: 0;
}
.rm-how .container { position: relative; z-index: 2; }
.rm-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
counter-reset: rmstep;
}
.rm-step {
position: relative;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 12px;
padding: 40px 32px;
transition: transform 0.45s var(--rm-spring), border-color 0.25s ease;
}
.rm-step:hover { transform: translateY(-6px); border-color: rgba(177, 78, 255, 0.5); }
.rm-step__num {
font-family: var(--thelis-ff-display);
font-size: 44px;
font-weight: 800;
letter-spacing: -2px;
background: var(--rm-grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1;
margin-bottom: 18px;
}
.rm-step h3 {
font-family: var(--thelis-ff-display);
font-size: 20px;
font-weight: 700;
color: #ffffff !important;
margin: 0 0 10px;
}
.rm-step p {
font-family: var(--thelis-ff-display);
font-size: 15px;
font-weight: 300;
line-height: 1.65;
color: rgba(255, 255, 255, 0.72) !important;
margin: 0;
} .rm-benefits__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.rm-benefit {
background: var(--rm-white);
border: 1px solid var(--rm-border);
border-top: 2px solid transparent;
border-radius: 10px;
padding: 34px 28px;
transition: transform 0.45s var(--rm-spring), box-shadow 0.25s ease, border-top-color 0.25s ease;
}
.rm-benefit:hover {
transform: translateY(-6px);
border-top-color: var(--rm-accent);
box-shadow: 0 18px 44px rgba(19, 8, 43, 0.09);
}
.rm-benefit__icon {
width: 42px; height: 42px;
color: var(--rm-accent);
margin-bottom: 18px;
}
.rm-benefit__icon svg { width: 100%; height: 100%; }
.rm-benefit h3 {
font-family: var(--thelis-ff-display);
font-size: 17px;
font-weight: 700;
letter-spacing: -0.3px;
color: var(--rm-text);
margin: 0 0 9px;
}
.rm-benefit p {
font-family: var(--thelis-ff-display);
font-size: 14px;
font-weight: 300;
line-height: 1.6;
color: var(--rm-gray);
margin: 0;
} .rm-testimonials__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.rm-quote {
position: relative;
background: var(--rm-light);
border: 1px solid var(--rm-border);
border-radius: 12px;
padding: 36px 32px;
transition: transform 0.4s var(--rm-spring), box-shadow 0.25s ease;
}
.rm-quote:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(19, 8, 43, 0.08); }
.rm-quote__mark {
font-family: var(--thelis-ff-title);
font-size: 64px;
line-height: 0.7;
color: var(--rm-accent);
opacity: 0.35;
margin-bottom: 8px;
}
.rm-quote p {
font-family: var(--thelis-ff-title);
font-style: italic;
font-size: 20px;
font-weight: 500;
line-height: 1.4;
color: var(--rm-text);
margin: 0 0 22px;
}
.rm-quote__author {
font-family: var(--thelis-ff-mono);
font-size: 11px;
letter-spacing: 1px;
color: var(--rm-gray);
}
.rm-quote__author strong { color: var(--rm-accent-2); font-weight: 700; } .rm-cta {
position: relative;
padding: 120px 0;
overflow: hidden;
}
.rm-cta::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 120%, rgba(177, 78, 255, 0.35), transparent 55%),
radial-gradient(circle at 80% 10%, rgba(255, 45, 149, 0.20), transparent 45%);
pointer-events: none;
z-index: 0;
}
.rm-cta .container { position: relative; z-index: 2; text-align: center; }
.rm-cta__inner { max-width: 720px; margin: 0 auto; }
.rm-cta__title {
font-family: var(--thelis-ff-display) !important;
font-size: clamp(34px, 5vw, 62px);
font-weight: 800;
letter-spacing: -2px;
line-height: 1.05;
color: #ffffff !important;
margin: 18px 0 18px;
}
.rm-cta__title em {
font-style: normal;
background: var(--rm-grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.rm-cta__desc {
font-family: var(--thelis-ff-display);
font-size: 16px;
font-weight: 300;
line-height: 1.7;
color: rgba(255, 255, 255, 0.74) !important;
margin: 0 auto 36px;
max-width: 520px;
}
.rm-cta__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
margin-bottom: 18px;
}
.rm-cta__pricing {
font-family: var(--thelis-ff-mono);
font-size: 12px;
letter-spacing: 1px;
}
.rm-cta__pricing a {
color: var(--rm-accent-3) !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(0, 240, 255, 0.4);
}
.rm-cta__pricing a:hover { border-color: var(--rm-accent-3); }
.rm-cta__label { justify-content: center; } @media (max-width: 1024px) {
.rm-hero { padding: 120px 0 80px; }
.rm-hero__layout { grid-template-columns: 1fr; gap: 56px; }
.rm-hero__visual { max-width: 560px; }
.rm-problem__grid { grid-template-columns: 1fr; gap: 40px; }
.rm-feature { grid-template-columns: 1fr; gap: 36px; margin-bottom: 72px; }
.rm-feature:nth-child(even) .rm-feature__media { order: 0; }
.rm-feature__media { order: -1; }
.rm-steps { grid-template-columns: 1fr; }
.rm-benefits__grid { grid-template-columns: repeat(2, 1fr); }
.rm-testimonials__grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.rm-problem, .rm-features, .rm-how, .rm-benefits, .rm-testimonials, .rm-cta { padding: 80px 0; }
.rm-trust__inner { flex-direction: column; align-items: flex-start; gap: 28px; }
.rm-benefits__grid { grid-template-columns: 1fr; }
.rm-hero__cta .rm-btn, .rm-cta__actions .rm-btn { width: 100%; justify-content: center; }
}