:root {
--bg: oklch(12% 0.01 240);
--bg2: oklch(16% 0.012 240);
--bg3: oklch(20% 0.014 240);
--fg: oklch(96% 0.005 240);
--fg-dim: oklch(60% 0.01 240);
--accent: oklch(62% 0.22 240);
--accent-dim: oklch(62% 0.22 240 / 0.15);
--accent-glow: oklch(62% 0.22 240 / 0.4);
--border: oklch(30% 0.015 240);
--display: 'Bebas Neue', sans-serif;
--body: 'DM Sans', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--fg);
font-family: var(--body);
font-size: 16px;
line-height: 1.6;
overflow-x: hidden;
}
/* Noise texture overlay */
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 1000;
opacity: 0.6;
}
#root { position: relative; }
/* --- ANNOUNCEMENT BAR --- */
.announce-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 110;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 11px 24px;
background: linear-gradient(90deg, oklch(58% 0.22 240) 0%, oklch(64% 0.22 240) 50%, oklch(58% 0.22 240) 100%);
background-size: 200% 100%;
color: #fff;
text-decoration: none;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
transition: filter 0.2s;
overflow: hidden;
animation: announce-shimmer 8s linear infinite;
}
@keyframes announce-shimmer {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
.announce-bar:hover { filter: brightness(1.1); }
.announce-bar:hover .announce-bar-arrow { transform: translateX(4px); }
.announce-bar-pulse {
width: 8px;
height: 8px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
animation: announce-pulse 1.8s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes announce-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
50% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
}
.announce-bar-tag {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.22em;
padding: 3px 7px;
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 3px;
}
.announce-bar-text strong { font-weight: 700; }
.announce-bar-cta {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding-left: 14px;
margin-left: 4px;
border-left: 1px solid rgba(255, 255, 255, 0.35);
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.announce-bar-arrow {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-block;
}
body { padding-top: 40px; }
.nav { top: 40px !important; }
@media (max-width: 800px) {
.announce-bar {
gap: 8px;
padding: 9px 14px;
font-size: 11.5px;
}
.announce-bar-tag { display: none; }
.announce-bar-cta {
padding-left: 10px;
margin-left: 0;
font-size: 10.5px;
}
}
@media (max-width: 560px) {
.announce-bar-cta { display: none; }
.announce-bar { padding: 8px 12px; font-size: 11px; }
body { padding-top: 36px; }
.nav { top: 36px !important; }
}
/* --- NAV --- */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 48px;
height: 72px;
background: var(--bg);
border-bottom: 1px solid var(--border);
transition: background 0.3s;
}
.nav.scrolled {
background: oklch(10% 0.01 240 / 0.95);
backdrop-filter: blur(12px);
}
.nav-logo {
font-family: var(--display);
font-size: 28px;
letter-spacing: 0.05em;
color: var(--fg);
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
}
.nav-logo span { color: var(--accent); letter-spacing: 0; }
.nav-logo img {
height: 36px;
width: auto;
mix-blend-mode: screen;
filter: brightness(1.1);
}
.nav-links {
display: flex;
align-items: center;
gap: 32px;
list-style: none;
}
.nav-links a {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fg-dim);
text-decoration: none;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--fg); }
.nav-cta {
background: var(--accent);
color: #fff !important;
padding: 10px 22px;
font-weight: 600 !important;
border-radius: 2px;
letter-spacing: 0.08em !important;
transition: filter 0.2s !important;
white-space: nowrap;
}
.nav-cta:hover { filter: brightness(1.12) !important; color: #fff !important; }
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 4px;
background: none;
border: 0;
position: relative;
z-index: 101;
}
.hamburger span {
display: block;
width: 24px;
height: 2px;
background: var(--fg);
transition: 0.3s;
transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* --- HERO --- */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding: 120px 48px 80px;
}
.hero-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 80% at 70% 50%, oklch(62% 0.22 240 / 0.07) 0%, transparent 60%),
linear-gradient(160deg, var(--bg) 0%, oklch(14% 0.015 240) 100%);
}
.hero-grid-lines {
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--border) 1px, transparent 1px),
linear-gradient(90deg, var(--border) 1px, transparent 1px);
background-size: 80px 80px;
opacity: 0.3;
mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 70%);
}
.hero-diagonal {
position: absolute;
right: -100px;
top: 0;
bottom: 0;
width: 55%;
background: var(--bg2);
clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);
overflow: hidden;
}
.hero-logo-mark {
position: absolute;
bottom: 40px;
right: 200px;
z-index: 3;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.hero-operator-card-dot {
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 6px rgba(255,255,255,0.9);
animation: pulse-dot 1.4s ease-in-out infinite;
}
.hero-logo-mark img {
width: 320px;
filter: saturate(1.1);
opacity: 1;
}
/* Floating Operator preview dashboard in the hero */
.hero-operator-wrap {
position: absolute;
top: 50%;
left: clamp(560px, 52vw, 780px);
transform: translateY(-50%);
width: 440px;
perspective: 1800px;
z-index: 4;
}
.hero-operator-label {
margin-bottom: 18px;
transform: rotate(-1deg);
transform-origin: left center;
}
.hero-operator-label-pill {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.25em;
text-transform: uppercase;
color: #fff;
padding: 5px 11px 5px 9px;
border-radius: 999px;
background: var(--accent);
box-shadow: 0 0 0 3px oklch(62% 0.22 240 / 0.2), 0 8px 24px -6px oklch(62% 0.22 240 / 0.6);
margin-bottom: 10px;
}
.hero-operator-label-brand {
line-height: 0.92;
}
.hero-operator-label-pri {
font-family: var(--display);
font-size: 16px;
letter-spacing: 0.18em;
color: var(--fg-dim);
margin-bottom: 2px;
}
.hero-operator-label-sec {
font-family: var(--display);
font-size: 56px;
letter-spacing: 0.03em;
color: var(--fg);
}
.operator-mock-screenshot {
display: block;
width: 100%;
height: auto;
}
.hero-operator-screenshot {
display: block;
width: 100%;
height: auto;
}
.hero-operator-frame {
display: block;
text-decoration: none;
background: oklch(8% 0.01 240);
border: 1px solid oklch(35% 0.04 240);
border-radius: 12px;
overflow: hidden;
box-shadow:
0 0 0 1px oklch(20% 0.02 240),
0 30px 80px -20px oklch(62% 0.22 240 / 0.4),
0 60px 120px -40px rgba(0,0,0,0.7);
transform: rotateY(-10deg) rotateX(5deg) rotate(1deg);
transform-origin: center center;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s, border-color 0.3s;
will-change: transform;
}
.hero-operator-frame:hover {
transform: rotateY(-4deg) rotateX(2deg) rotate(0deg);
border-color: var(--accent);
box-shadow:
0 0 0 1px var(--accent),
0 40px 100px -20px oklch(62% 0.22 240 / 0.55),
0 80px 140px -40px rgba(0,0,0,0.8);
}
.hero-operator-body {
display: grid;
grid-template-columns: 110px 1fr;
background: oklch(10% 0.012 240);
}
.hero-operator-sidebar {
background: oklch(8% 0.01 240);
border-right: 1px solid oklch(20% 0.02 240);
padding: 14px 8px;
display: flex;
flex-direction: column;
gap: 2px;
}
.hero-operator-sidebar-logo {
font-family: var(--display);
font-size: 12px;
letter-spacing: 0.05em;
color: var(--fg);
padding: 4px 8px;
margin-bottom: 10px;
}
.hero-operator-sidebar-logo span { color: var(--accent); }
.hero-operator-sidebar-nav {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
border-radius: 3px;
font-size: 9.5px;
color: oklch(65% 0.01 240);
letter-spacing: 0.02em;
}
.hero-operator-sidebar-nav.active {
background: var(--accent-dim);
color: var(--accent);
font-weight: 700;
}
.hero-operator-sidebar-nav span {
width: 8px;
height: 8px;
background: currentColor;
border-radius: 2px;
opacity: 0.6;
flex-shrink: 0;
}
.hero-operator-main {
padding: 14px 14px 12px;
overflow: hidden;
}
.hero-operator-main-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.hero-operator-main-h1 {
font-family: var(--display);
font-size: 13px;
letter-spacing: 0.04em;
color: var(--fg);
}
.hero-operator-main-badge {
font-size: 7.5px;
font-weight: 800;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #fff;
padding: 3px 7px;
background: var(--accent);
border-radius: 999px;
}
.hero-operator-main-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
margin-bottom: 12px;
}
.hero-operator-main-stat {
background: oklch(13% 0.014 240);
border: 1px solid oklch(22% 0.02 240);
border-radius: 4px;
padding: 7px 9px 8px;
}
.hero-operator-main-stat-label {
font-size: 7px;
font-weight: 800;
letter-spacing: 0.18em;
color: var(--fg-dim);
margin-bottom: 2px;
}
.hero-operator-main-stat-value {
font-family: var(--display);
font-size: 17px;
color: var(--fg);
line-height: 1;
letter-spacing: 0.02em;
display: flex;
align-items: baseline;
gap: 4px;
}
.hero-operator-main-stat-value em {
font-style: normal;
font-family: var(--body);
font-size: 8px;
color: var(--accent);
font-weight: 700;
letter-spacing: 0.05em;
}
.hero-operator-main-card {
background: oklch(13% 0.014 240);
border: 1px solid oklch(22% 0.02 240);
border-radius: 4px;
padding: 9px 10px 8px;
margin-bottom: 7px;
}
.hero-operator-main-card:last-child { margin-bottom: 0; }
.hero-operator-main-card-title {
font-size: 8px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--fg-dim);
margin-bottom: 6px;
display: flex;
align-items: center;
justify-content: space-between;
}
.hero-operator-main-card-dot {
width: 5px;
height: 5px;
background: var(--accent);
border-radius: 50%;
}
.hero-operator-main-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 0;
border-bottom: 1px solid oklch(20% 0.02 240);
font-size: 9px;
}
.hero-operator-main-row:last-child { border-bottom: none; }
.hero-operator-main-row-label {
color: var(--fg);
display: flex;
align-items: center;
gap: 6px;
}
.hero-operator-row-dot {
width: 5px;
height: 5px;
border-radius: 50%;
flex-shrink: 0;
}
.hero-operator-row-dot.green { background: oklch(70% 0.18 145); }
.hero-operator-row-dot.amber { background: oklch(75% 0.16 75); }
.hero-operator-row-dot.blue { background: var(--accent); }
.hero-operator-main-row-value {
color: var(--fg-dim);
font-family: monospace;
font-size: 8.5px;
}
.hero-operator-main-chart {
height: 36px;
display: flex;
align-items: flex-end;
gap: 3px;
}
.hero-operator-main-chart-bar {
flex: 1;
background: linear-gradient(180deg, var(--accent) 0%, oklch(62% 0.22 240 / 0.3) 100%);
border-radius: 2px 2px 0 0;
}
/* Floating overlay tags */
.hero-operator-tag {
position: absolute;
z-index: 5;
background: oklch(10% 0.012 240 / 0.92);
backdrop-filter: blur(10px);
border: 1px solid var(--accent);
padding: 7px 11px;
border-radius: 6px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--fg);
box-shadow: 0 12px 32px -8px oklch(62% 0.22 240 / 0.5);
display: flex;
align-items: center;
gap: 7px;
text-decoration: none;
white-space: nowrap;
}
.hero-operator-tag-1 {
top: 88px;
right: -28px;
animation: float-1 6s ease-in-out infinite;
}
.hero-operator-tag-2 {
bottom: 36px;
left: -36px;
animation: float-2 7s ease-in-out infinite;
}
@media (max-width: 1380px) {
.hero-operator-wrap { width: 400px; left: clamp(520px, 50vw, 720px); }
.hero-operator-label-sec { font-size: 48px; }
.hero-operator-tag-1 { right: -10px; }
.hero-operator-tag-2 { left: -16px; }
}
@media (max-width: 1200px) {
.hero-operator-wrap { width: 360px; }
.hero-operator-label-sec { font-size: 42px; }
.hero-operator-tag { font-size: 9.5px; padding: 6px 9px; }
.hero-operator-tag-1 { right: 0; }
.hero-operator-tag-2 { left: 0; }
.hero-logo-mark { display: none; }
}
@media (max-width: 1050px) {
.hero-operator-wrap { width: 320px; left: auto; right: 32px; }
.hero-operator-body { grid-template-columns: 1fr; }
.hero-operator-sidebar { display: none; }
.hero-operator-label { display: none; }
}
@media (max-width: 900px) {
.hero-operator-wrap { display: none; }
}
.hero-logo-mark-label {
font-family: var(--display);
font-size: 13px;
letter-spacing: 0.3em;
color: rgba(255,255,255,0.5);
text-transform: uppercase;
}
.hero-img-placeholder {
width: 100%;
height: 100%;
background-image: url('uploads/AdobeStock_205813782.jpeg');
background-size: cover;
background-position: center;
position: relative;
}
.hero-stripe {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--accent);
clip-path: polygon(0% 0%, 100% 5%, 100% 95%, 0% 100%);
}
.hero-content {
position: relative;
z-index: 2;
max-width: 680px;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 24px;
}
.hero-eyebrow::before {
content: none;
}
.hero-title {
font-family: var(--display);
font-size: clamp(72px, 9vw, 130px);
line-height: 0.92;
letter-spacing: 0.02em;
margin-bottom: 32px;
text-wrap: balance;
}
.hero-title em {
font-style: normal;
color: var(--accent);
display: block;
}
.hero-sub {
font-size: 17px;
line-height: 1.7;
color: var(--fg-dim);
max-width: 480px;
margin-bottom: 48px;
font-weight: 300;
}
.hero-sub strong { color: var(--fg); font-weight: 500; }
.hero-actions {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.btn-primary {
background: var(--accent);
color: #fff;
font-family: var(--body);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 16px 36px;
border: none;
border-radius: 2px;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: filter 0.2s, transform 0.2s;
}
.btn-primary:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn-secondary {
background: transparent;
color: var(--fg);
font-family: var(--body);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 15px 36px;
border: 1px solid var(--border);
border-radius: 2px;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: border-color 0.2s, color 0.2s;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.hero-stats {
display: flex;
gap: 48px;
margin-top: 64px;
padding-top: 40px;
border-top: 1px solid var(--border);
}
.hero-family {
margin-top: 72px;
padding-top: 40px;
border-top: 1px solid var(--border);
position: relative;
}
.hero-family::before {
content: '';
position: absolute;
top: -1px;
left: 0;
width: 64px;
height: 1px;
background: var(--accent);
}
.hero-family-label {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--fg-dim);
margin-bottom: 18px;
}
.hero-family-tick {
width: 6px;
height: 6px;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 8px 1px var(--accent);
}
.hero-family-row {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.hero-family-item {
font-family: var(--display);
font-size: 28px;
letter-spacing: 0.04em;
color: var(--fg);
line-height: 1;
transition: color 0.2s;
}
.hero-family-item:hover { color: var(--accent); }
.hero-family-sep {
font-family: var(--display);
font-size: 24px;
color: var(--accent);
opacity: 0.5;
line-height: 1;
}
.hero-family-plus {
margin-left: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
padding: 6px 12px;
border: 1px solid var(--accent);
border-radius: 999px;
background: var(--accent-dim);
}
.stat-num {
font-family: var(--display);
font-size: 42px;
letter-spacing: 0.03em;
color: var(--fg);
line-height: 1;
}
.stat-num span { color: var(--accent); }
.stat-label {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fg-dim);
margin-top: 4px;
}
/* --- MARQUEE BAND --- */
.marquee-band {
background: var(--accent);
padding: 14px 0;
overflow: hidden;
position: relative;
}
.marquee-track {
display: flex;
gap: 0;
animation: marquee 30s linear infinite;
width: max-content;
}
.marquee-item {
font-family: var(--display);
font-size: 15px;
letter-spacing: 0.15em;
color: #fff;
padding: 0 32px;
display: flex;
align-items: center;
gap: 16px;
white-space: nowrap;
}
.marquee-item::after {
content: '✦';
opacity: 0.5;
font-size: 10px;
}
.marquee-soon {
font-family: var(--body);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #fff;
background: rgba(255,255,255,0.18);
padding: 4px 9px;
border-radius: 999px;
margin-left: 12px;
border: 1px solid rgba(255,255,255,0.35);
}
.marquee-item-featured {
font-weight: bold;
}
.marquee-new {
font-family: var(--body);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
background: #fff;
padding: 4px 9px;
border-radius: 999px;
margin-left: 12px;
}
.nav-operator {
position: relative;
}
.nav-operator::after {
content: 'NEW';
position: absolute;
top: -8px;
right: -22px;
font-size: 8px;
font-weight: 800;
letter-spacing: 0.15em;
color: #fff;
background: var(--accent);
padding: 2px 5px;
border-radius: 2px;
}
.nav-login {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 18px;
border: 1px solid var(--border);
border-radius: 2px;
color: var(--fg) !important;
transition: border-color 0.2s, color 0.2s, background 0.2s;
letter-spacing: 0.1em !important;
font-weight: 500 !important;
}
.nav-login::before {
content: '';
width: 14px;
height: 14px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
opacity: 0.85;
}
.nav-login:hover {
border-color: var(--accent);
color: var(--accent) !important;
background: var(--accent-dim);
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* --- SECTION COMMON --- */
section { padding: 120px 48px; }
.section-label {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 16px;
}
.section-label::before {
content: none;
}
.section-title {
font-family: var(--display);
font-size: clamp(48px, 6vw, 88px);
line-height: 0.94;
letter-spacing: 0.02em;
margin-bottom: 24px;
}
.section-body {
font-size: 16px;
line-height: 1.75;
color: var(--fg-dim);
max-width: 520px;
font-weight: 300;
}
/* --- SERVICES --- */
.services { background: var(--bg); }
.services-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 64px;
gap: 32px;
flex-wrap: wrap;
}
.service-card-link {
text-decoration: none;
color: inherit;
display: flex;
flex: 1;
}
.service-card-link .service-card { flex: 1; }
.services-grid {
display: grid;
gap: 2px;
grid-auto-rows: 1fr;
}
.services-grid-4 { grid-template-columns: repeat(4, 1fr); }
.services-grid-3 { grid-template-columns: repeat(3, 1fr); }
.services-grid .reveal {
display: flex;
flex-direction: column;
}
.service-card {
background: var(--bg2);
padding: 40px 32px;
position: relative;
cursor: pointer;
overflow: hidden;
transition: background 0.3s;
border: 1px solid transparent;
flex: 1;
display: flex;
flex-direction: column;
}
.service-brand {
margin-bottom: 14px;
}
.service-brand-pri {
font-family: var(--display);
font-size: 16px;
letter-spacing: 0.18em;
color: var(--fg-dim);
line-height: 1;
margin-bottom: 4px;
}
.service-brand-sec {
font-family: var(--display);
font-size: 32px;
letter-spacing: 0.06em;
color: var(--accent);
line-height: 1;
}
.service-items {
list-style: none;
margin-top: 18px;
display: flex;
flex-direction: column;
gap: 6px;
}
.service-items li {
font-size: 12px;
color: var(--fg-dim);
font-weight: 400;
letter-spacing: 0.05em;
padding-left: 14px;
position: relative;
}
.service-items li::before {
content: '';
position: absolute;
left: 0;
top: 6px;
width: 6px;
height: 1px;
background: var(--accent);
}
.service-card-soon {
background: linear-gradient(155deg, oklch(20% 0.05 240) 0%, oklch(17% 0.04 240) 100%);
cursor: pointer;
border: 1px solid oklch(35% 0.08 240);
box-shadow: 0 4px 24px -8px oklch(62% 0.22 240 / 0.2);
transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.service-card-soon::before { display: none; }
.service-card-soon:hover {
background: linear-gradient(155deg, oklch(24% 0.06 240) 0%, oklch(20% 0.05 240) 100%);
border-color: var(--accent);
transform: translateY(-4px);
box-shadow: 0 12px 40px -8px oklch(62% 0.22 240 / 0.4);
}
.service-icon-soon { background: var(--accent); }
.service-icon-soon svg { stroke: #fff; }
.service-card-soon .service-brand-pri { color: var(--fg); }
.service-card-soon .service-brand-sec { color: var(--fg); }
.service-card-soon .service-desc { color: oklch(75% 0.02 240); }
.soon-badge {
position: absolute;
top: 20px;
right: 20px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #fff;
padding: 6px 12px 6px 22px;
border-radius: 999px;
background: var(--accent);
white-space: nowrap;
display: flex;
align-items: center;
box-shadow: 0 0 0 3px oklch(62% 0.22 240 / 0.25);
animation: glow-pulse 2.5s ease-in-out infinite;
}
.soon-badge-dot {
position: absolute;
left: 9px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 8px 1px rgba(255,255,255,0.9);
animation: pulse-dot 1.4s ease-in-out infinite;
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 0 3px oklch(62% 0.22 240 / 0.25); }
50% { box-shadow: 0 0 0 10px oklch(62% 0.22 240 / 0.0); }
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
50% { opacity: 0.5; transform: translateY(-50%) scale(0.7); }
}
.soon-notify {
margin-top: auto;
padding-top: 20px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent);
opacity: 0;
transform: translateY(6px);
transition: opacity 0.3s, transform 0.3s;
}
.service-card-soon:hover .soon-notify { opacity: 1; transform: translateY(0); }
.coming-soon-wrapper {
margin-top: 100px;
position: relative;
padding: 80px 36px 60px;
border-radius: 4px;
background:
radial-gradient(ellipse 80% 60% at 50% 0%, oklch(62% 0.22 240 / 0.12) 0%, transparent 70%),
oklch(11% 0.012 240);
overflow: hidden;
border: 1px solid oklch(30% 0.04 240);
}
.coming-soon-stripes {
position: absolute;
inset: 0;
pointer-events: none;
background-image: repeating-linear-gradient(
-45deg,
transparent 0,
transparent 24px,
oklch(62% 0.22 240 / 0.04) 24px,
oklch(62% 0.22 240 / 0.04) 26px
);
mask-image: linear-gradient(to bottom, black 0%, transparent 55%);
}
.coming-soon-header {
margin-bottom: 56px;
text-align: center;
position: relative;
z-index: 2;
}
.coming-soon-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--accent);
padding: 8px 18px;
border: 1px solid var(--accent);
border-radius: 999px;
background: var(--accent-dim);
margin-bottom: 20px;
}
.coming-soon-dot {
width: 8px;
height: 8px;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 10px 2px var(--accent);
animation: pulse-dot 1.4s ease-in-out infinite;
}
.coming-soon-title {
font-family: var(--display);
font-size: clamp(56px, 7vw, 96px);
letter-spacing: 0.04em;
line-height: 0.95;
color: var(--fg);
margin-bottom: 16px;
}
.coming-soon-title em {
font-style: normal;
color: var(--accent);
}
.coming-soon-sub {
font-size: 15px;
color: var(--fg-dim);
max-width: 540px;
margin: 0 auto;
line-height: 1.7;
font-weight: 300;
}
.coming-soon-grid {
position: relative;
z-index: 2;
grid-template-columns: repeat(2, 1fr) !important;
max-width: 960px;
margin: 0 auto;
}
.service-card::before {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s ease;
}
.service-card:hover { background: var(--bg3); border-color: var(--border); }
.service-card:hover::before { transform: scaleX(1); }
.service-num {
font-family: var(--display);
font-size: 64px;
color: oklch(30% 0.015 240);
line-height: 1;
position: absolute;
top: 24px; right: 28px;
transition: color 0.3s;
}
.service-card:hover .service-num { color: var(--accent-dim); }
.service-icon {
width: 48px;
height: 48px;
background: var(--accent-dim);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
transition: background 0.3s;
}
.service-card:hover .service-icon { background: oklch(62% 0.22 240 / 0.25); }
.service-icon svg { width: 22px; height: 22px; stroke: var(--accent); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.service-name {
font-family: var(--display);
font-size: 26px;
letter-spacing: 0.05em;
margin-bottom: 12px;
line-height: 1.1;
}
.service-desc {
font-size: 14px;
line-height: 1.7;
color: var(--fg-dim);
font-weight: 300;
}
.service-arrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
margin-top: 24px;
opacity: 0;
transform: translateX(-8px);
transition: opacity 0.3s, transform 0.3s;
}
.service-card:hover .service-arrow { opacity: 1; transform: translateX(0); }
/* --- VALUE PROP / ABOUT --- */
.about { background: var(--bg2); position: relative; overflow: hidden; }
.about-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.about-visual {
position: relative;
height: 520px;
}
.about-img-main {
position: absolute;
inset: 0;
background: oklch(18% 0.02 240);
border-radius: 2px;
overflow: hidden;
}
.about-img-main img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.about-img-overlay {
position: absolute;
bottom: -24px;
right: -24px;
width: 200px;
height: 160px;
background: var(--accent);
border-radius: 2px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
z-index: 2;
}
.about-img-overlay .big { font-family: var(--display); font-size: 56px; color: #fff; line-height: 1; }
.about-img-overlay .small { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.8); }
.checklist {
list-style: none;
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 32px;
}
.checklist li {
display: flex;
align-items: flex-start;
gap: 14px;
font-size: 15px;
color: var(--fg-dim);
line-height: 1.5;
}
.checklist li::before {
content: '';
flex-shrink: 0;
width: 20px;
height: 20px;
border: 1.5px solid var(--accent);
border-radius: 50%;
background: var(--accent-dim);
margin-top: 2px;
position: relative;
}
.checklist li::after {
content: none;
}
.check-wrap {
display: flex;
align-items: flex-start;
gap: 14px;
font-size: 15px;
color: var(--fg-dim);
line-height: 1.5;
}
.check-mark {
flex-shrink: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--accent-dim);
border: 1.5px solid var(--accent);
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
.check-mark svg { width: 10px; height: 10px; stroke: var(--accent); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
/* --- TESTIMONIAL FEATURE --- */
.testimonial-feature {
position: relative;
padding: 140px 48px;
overflow: hidden;
background: var(--bg);
isolation: isolate;
}
.tf-bg {
position: absolute;
inset: 0;
background-image: url('uploads/IMG_0673.jpeg');
background-size: cover;
background-position: center;
filter: grayscale(0.6) contrast(1.05) brightness(0.4);
z-index: -2;
}
.tf-bg::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 50% 50%, transparent 0%, oklch(10% 0.01 240 / 0.9) 80%),
linear-gradient(180deg, oklch(10% 0.01 240 / 0.7) 0%, oklch(10% 0.01 240 / 0.4) 50%, oklch(10% 0.01 240 / 0.85) 100%);
}
.tf-stripes {
position: absolute;
inset: 0;
pointer-events: none;
background-image: repeating-linear-gradient(
-45deg,
transparent 0,
transparent 60px,
oklch(62% 0.22 240 / 0.05) 60px,
oklch(62% 0.22 240 / 0.05) 62px
);
z-index: -1;
}
.tf-content {
max-width: 1100px;
margin: 0 auto;
text-align: center;
position: relative;
}
.tf-spotlight {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--accent);
padding: 8px 18px;
border: 1px solid var(--accent);
border-radius: 999px;
background: oklch(62% 0.22 240 / 0.15);
margin-bottom: 32px;
backdrop-filter: blur(6px);
}
.tf-spotlight-dot {
width: 8px;
height: 8px;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 10px 2px var(--accent);
animation: pulse-dot 1.4s ease-in-out infinite;
}
.tf-stars {
font-size: 22px;
letter-spacing: 0.3em;
color: var(--accent);
margin-bottom: 36px;
text-shadow: 0 0 12px oklch(62% 0.22 240 / 0.6);
}
.tf-quote {
position: relative;
font-family: var(--display);
font-size: clamp(32px, 4.8vw, 64px);
line-height: 1.18;
letter-spacing: 0.015em;
color: #fff;
text-wrap: balance;
max-width: 1000px;
margin: 0 auto 56px;
padding: 0 60px;
}
.tf-quote em {
font-style: normal;
color: var(--accent);
background: linear-gradient(180deg, transparent 60%, oklch(62% 0.22 240 / 0.25) 60%);
padding: 0 4px;
}
.tf-mark {
font-family: Georgia, serif;
font-size: 180px;
line-height: 0.5;
color: var(--accent);
position: absolute;
user-select: none;
pointer-events: none;
}
.tf-mark-open {
top: 28px;
left: -10px;
}
.tf-mark-close {
bottom: -50px;
right: -10px;
}
.tf-quote-text {
position: relative;
z-index: 2;
}
.tf-attribution {
display: inline-flex;
align-items: center;
gap: 24px;
padding: 20px 32px;
border: 1px solid oklch(40% 0.05 240);
background: oklch(12% 0.01 240 / 0.7);
backdrop-filter: blur(12px);
border-radius: 4px;
}
.tf-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 2px solid var(--accent);
box-shadow: 0 0 0 3px oklch(62% 0.22 240 / 0.2);
}
.tf-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.tf-attr-text {
text-align: left;
display: flex;
flex-direction: column;
gap: 2px;
}
.tf-name {
font-family: var(--display);
font-size: 22px;
letter-spacing: 0.04em;
color: var(--fg);
line-height: 1.1;
}
.tf-role {
font-size: 13px;
color: oklch(75% 0.02 240);
font-weight: 500;
}
.tf-location {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--fg-dim);
margin-top: 2px;
}
.tf-attr-divider {
width: 1px;
height: 48px;
background: oklch(40% 0.05 240);
}
.tf-stat {
text-align: left;
}
.tf-stat-num {
font-family: var(--display);
font-size: 30px;
letter-spacing: 0.04em;
color: var(--accent);
line-height: 1;
margin-bottom: 4px;
}
.tf-stat-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--fg-dim);
line-height: 1.4;
}
@media (max-width: 700px) {
.testimonial-feature { padding: 100px 24px; }
.tf-quote { padding: 0 20px; font-size: clamp(24px, 7vw, 36px); }
.tf-mark { font-size: 100px; }
.tf-mark-open { top: 14px; }
.tf-mark-close { bottom: -28px; }
.tf-attribution { flex-direction: column; gap: 16px; padding: 24px; }
.tf-attr-divider { width: 48px; height: 1px; }
.tf-stat { text-align: center; }
.tf-attr-text { text-align: center; }
}
/* --- WHY WASH LYFE --- */
.why-section {
background: var(--bg);
position: relative;
overflow: hidden;
}
.why-bg-text {
position: absolute;
font-family: var(--display);
font-size: clamp(180px, 22vw, 360px);
letter-spacing: 0.04em;
color: oklch(15% 0.012 240);
bottom: -40px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
pointer-events: none;
z-index: 0;
line-height: 1;
}
.why-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
margin-bottom: 64px;
position: relative;
z-index: 1;
}
.why-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
position: relative;
z-index: 1;
}
.why-grid .reveal {
display: flex;
}
.why-card {
background: var(--bg2);
border: 1px solid var(--border);
padding: 48px 40px 44px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
flex: 1;
transition: transform 0.3s, border-color 0.3s, background 0.3s;
cursor: pointer;
}
.why-card:hover {
transform: translateY(-4px);
border-color: var(--accent);
background: oklch(18% 0.018 240);
}
.why-card:hover .why-line { transform: scaleX(1); }
.why-card:hover .why-num { color: var(--accent); opacity: 0.4; }
.why-num {
position: absolute;
top: 24px;
right: 32px;
font-family: var(--display);
font-size: 96px;
line-height: 1;
color: oklch(28% 0.015 240);
letter-spacing: 0.02em;
transition: color 0.3s, opacity 0.3s;
}
.why-icon-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 28px;
}
.why-tag {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
padding: 6px 12px;
border: 1px solid var(--accent);
border-radius: 999px;
background: var(--accent-dim);
}
.why-title {
font-family: var(--display);
font-size: clamp(36px, 4vw, 56px);
line-height: 0.96;
letter-spacing: 0.03em;
color: var(--fg);
margin-bottom: 20px;
position: relative;
}
.why-desc {
font-size: 15px;
line-height: 1.7;
color: var(--fg-dim);
font-weight: 300;
max-width: 480px;
}
.why-line {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
@media (max-width: 800px) {
.why-grid { grid-template-columns: 1fr; }
.why-num { font-size: 64px; top: 20px; right: 20px; }
.why-card { padding: 36px 28px 32px; }
}
/* --- PROCESS --- */
.process { background: var(--bg2); padding-bottom: 140px; position: relative; overflow: hidden; }
.process::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(oklch(62% 0.22 240 / 0.04) 1px, transparent 1px),
linear-gradient(90deg, oklch(62% 0.22 240 / 0.04) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(ellipse 70% 70% at 50% 60%, black 0%, transparent 80%);
pointer-events: none;
z-index: 0;
}
.process-sub {
max-width: 540px;
font-size: 16px;
line-height: 1.7;
color: var(--fg-dim);
font-weight: 300;
margin-top: 18px;
}
.process-timeline {
position: relative;
margin-top: 100px;
z-index: 1;
}
/* Horizontal track connecting orbs */
.process-track {
position: absolute;
top: 30px;
left: 0;
right: 0;
height: 2px;
pointer-events: none;
}
.process-track-line {
position: absolute;
top: 50%;
left: 12%;
right: 12%;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
var(--accent) 8%,
var(--accent) 92%,
transparent 100%
);
opacity: 0.4;
transform: translateY(-50%);
}
.process-track-pulse {
position: absolute;
top: 50%;
left: 12%;
width: 12px;
height: 12px;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 16px 4px var(--accent);
transform: translate(-50%, -50%);
animation: track-travel 8s ease-in-out infinite;
}
@keyframes track-travel {
0%, 100% { left: 12%; opacity: 0.2; }
25% { opacity: 1; }
50% { left: 88%; opacity: 1; }
75% { opacity: 0.4; }
}
/* Orbs (numbered circles) */
.process-orbs {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin-bottom: 40px;
position: relative;
z-index: 2;
}
.process-orb {
width: 64px;
height: 64px;
margin: 0 auto;
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%, oklch(28% 0.04 240) 0%, oklch(15% 0.02 240) 100%);
border: 1px solid var(--accent);
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow:
0 0 0 4px oklch(62% 0.22 240 / 0.1),
0 0 24px oklch(62% 0.22 240 / 0.3),
inset 0 0 12px oklch(62% 0.22 240 / 0.2);
}
.process-orb-ring {
position: absolute;
inset: -8px;
border-radius: 50%;
border: 1px solid oklch(62% 0.22 240 / 0.3);
animation: orb-pulse 3s ease-in-out infinite;
}
@keyframes orb-pulse {
0%, 100% { transform: scale(1); opacity: 0.6; }
50% { transform: scale(1.15); opacity: 0; }
}
.process-orb:nth-child(2) .process-orb-ring { animation-delay: 0.5s; }
.process-orb:nth-child(3) .process-orb-ring { animation-delay: 1s; }
.process-orb:nth-child(4) .process-orb-ring { animation-delay: 1.5s; }
.process-orb-num {
font-family: var(--display);
font-size: 22px;
letter-spacing: 0.08em;
color: var(--accent);
line-height: 1;
}
/* Cards grid */
.process-grid-new {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
position: relative;
z-index: 1;
}
.process-grid-new .reveal { display: flex; }
.process-card-new {
flex: 1;
background:
radial-gradient(ellipse 100% 60% at 50% 0%, oklch(62% 0.22 240 / 0.08) 0%, transparent 60%),
linear-gradient(165deg, oklch(17% 0.018 240) 0%, oklch(14% 0.014 240) 100%);
border: 1px solid oklch(26% 0.025 240);
border-radius: 6px;
padding: 36px 26px 30px;
position: relative;
overflow: hidden;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s, box-shadow 0.4s;
}
.process-card-new::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
opacity: 0.5;
transition: opacity 0.3s;
}
.process-card-new:hover {
transform: translateY(-6px);
border-color: var(--accent);
box-shadow:
0 14px 48px -14px oklch(62% 0.22 240 / 0.5),
0 30px 80px -36px rgba(0,0,0,0.6);
}
.process-card-new:hover::before { opacity: 1; }
.process-card-tag {
display: inline-flex;
align-items: center;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
padding: 5px 10px;
background: oklch(62% 0.22 240 / 0.12);
border: 1px solid oklch(62% 0.22 240 / 0.35);
border-radius: 999px;
margin-bottom: 22px;
}
.process-card-icon {
width: 56px;
height: 56px;
background: oklch(62% 0.22 240 / 0.1);
border: 1px solid oklch(62% 0.22 240 / 0.3);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
margin-bottom: 22px;
position: relative;
}
.process-card-icon::before {
content: '';
position: absolute;
top: -3px; left: -3px;
width: 7px; height: 7px;
border-top: 1px solid var(--accent);
border-left: 1px solid var(--accent);
}
.process-card-icon::after {
content: '';
position: absolute;
bottom: -3px; right: -3px;
width: 7px; height: 7px;
border-bottom: 1px solid var(--accent);
border-right: 1px solid var(--accent);
}
.process-card-icon svg {
width: 26px;
height: 26px;
}
.process-card-tagline {
font-style: italic;
font-size: 13px;
color: var(--accent);
letter-spacing: 0.03em;
margin-bottom: 6px;
font-weight: 500;
}
.process-card-title {
font-family: var(--display);
font-size: clamp(36px, 3.5vw, 52px);
letter-spacing: 0.04em;
line-height: 0.95;
color: var(--fg);
margin: 0 0 14px;
}
.process-card-desc {
font-size: 13.5px;
line-height: 1.65;
color: var(--fg-dim);
font-weight: 300;
margin-bottom: 18px;
}
.process-card-points {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 16px;
border-top: 1px solid oklch(24% 0.025 240);
}
.process-card-points li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12.5px;
color: var(--fg);
line-height: 1.45;
font-weight: 500;
}
.process-card-point-tick {
flex-shrink: 0;
width: 14px;
height: 14px;
border: 1px solid var(--accent);
border-radius: 50%;
background: oklch(62% 0.22 240 / 0.15);
position: relative;
margin-top: 2px;
}
.process-card-point-tick::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 4px;
height: 4px;
background: var(--accent);
border-radius: 50%;
}
@media (max-width: 1100px) {
.process-orbs { display: none; }
.process-grid-new { grid-template-columns: repeat(2, 1fr); gap: 12px; row-gap: 16px; }
.process-track { display: none; }
.process-card-title { font-size: clamp(32px, 5vw, 44px); }
}
@media (max-width: 600px) {
.process-grid-new { grid-template-columns: 1fr; }
.process { padding-bottom: 100px; }
.process-timeline { margin-top: 56px; }
}
.process-illustration {
margin: 40px 0 24px;
width: 100%;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
.process-illustration img {
width: 100%;
height: auto;
display: block;
}
@media (max-width: 700px) {
.process-illustration { display: none; }
}
.process-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
margin-top: 64px;
}
.process-step {
background: var(--bg3);
padding: 40px 32px;
position: relative;
overflow: hidden;
}
.process-step-num {
font-family: var(--display);
font-size: 80px;
color: oklch(25% 0.015 240);
line-height: 1;
margin-bottom: 20px;
}
.process-step-title {
font-family: var(--display);
font-size: 22px;
letter-spacing: 0.05em;
margin-bottom: 12px;
}
.process-step-desc {
font-size: 14px;
color: var(--fg-dim);
line-height: 1.7;
font-weight: 300;
}
.process-step-line {
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s ease;
}
.process-step:hover .process-step-line { transform: scaleX(1); }
/* --- CTA BAND --- */
.cta-band {
background: var(--accent);
padding: 80px 48px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
position: relative;
overflow: hidden;
}
.cta-band::before {
content: 'WASH LYFE';
position: absolute;
font-family: var(--display);
font-size: 200px;
color: rgba(255,255,255,0.06);
right: -20px;
top: 50%;
transform: translateY(-50%);
letter-spacing: 0.05em;
pointer-events: none;
white-space: nowrap;
}
.cta-band-title {
font-family: var(--display);
font-size: clamp(36px, 4vw, 60px);
color: #fff;
line-height: 1;
letter-spacing: 0.02em;
}
.cta-band-sub {
font-size: 16px;
color: rgba(255,255,255,0.75);
margin-top: 8px;
font-weight: 300;
}
.btn-white {
background: #fff;
color: var(--accent);
font-family: var(--body);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 18px 40px;
border: none;
border-radius: 2px;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: filter 0.2s, transform 0.2s;
flex-shrink: 0;
}
.btn-white:hover { filter: brightness(0.95); transform: translateY(-1px); }
/* --- FOOTER --- */
footer {
background: oklch(9% 0.01 240);
padding: 64px 48px 40px;
border-top: 1px solid var(--border);
}
.footer-top {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 56px;
}
.footer-brand-name {
font-family: var(--display);
font-size: 32px;
letter-spacing: 0.05em;
margin-bottom: 12px;
}
.footer-brand-name span { color: var(--accent); }
.footer-tagline {
font-size: 14px;
color: var(--fg-dim);
line-height: 1.7;
font-weight: 300;
max-width: 260px;
}
.footer-col-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--fg-dim);
margin-bottom: 20px;
}
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-links a {
font-size: 14px;
color: oklch(50% 0.01 240);
text-decoration: none;
transition: color 0.2s;
font-weight: 300;
}
.footer-links a:hover { color: var(--fg); }
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 32px;
border-top: 1px solid var(--border);
font-size: 13px;
color: oklch(40% 0.01 240);
flex-wrap: wrap;
gap: 12px;
}
/* --- Mobile menu overlay --- */
.mobile-menu {
position: fixed;
inset: 0;
background: oklch(10% 0.01 240 / 0.98);
z-index: 99;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 32px;
backdrop-filter: blur(12px);
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.77,0,0.175,1);
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu a {
font-family: var(--display);
font-size: 40px;
letter-spacing: 0.08em;
color: var(--fg);
text-decoration: none;
transition: color 0.2s;
}
.mobile-menu a:hover { color: var(--accent); }
.mobile-close {
position: absolute;
top: 24px;
right: 24px;
background: none;
border: none;
color: var(--fg);
cursor: pointer;
font-size: 28px;
padding: 8px;
}
/* Scroll animations */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
opacity: 1;
transform: none;
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
@media (max-width: 900px) {
.nav-links { display: none; }
.hamburger { display: flex; }
section { padding: 80px 24px; }
.hero { padding: 100px 24px 60px; }
.hero-diagonal { display: none; }
.hero-title { font-size: clamp(56px, 13vw, 90px); }
.services-grid-4 { grid-template-columns: 1fr; }
.services-grid-3 { grid-template-columns: 1fr; }
.about-inner { grid-template-columns: 1fr; }
.about-visual { height: 300px; }
.about-img-overlay { display: none; }
.testimonial-inner { grid-template-columns: 1fr; gap: 40px; }
.process-steps { grid-template-columns: 1fr 1fr; }
.footer-top { grid-template-columns: 1fr 1fr; }
.nav { padding: 0 24px; }
.cta-band { padding: 64px 24px; }
footer { padding: 64px 24px 40px; }
.hero-stats { gap: 24px; flex-wrap: wrap; }
}
@media (max-width: 600px) {
.process-steps { grid-template-columns: 1fr; }
.footer-top { grid-template-columns: 1fr; }
.cta-band { flex-direction: column; text-align: center; }
}
/* ============================================================ */
/* WASH LYFE OPERATOR PRODUCT SECTION */
/* ============================================================ */
.operator-section {
position: relative;
padding: 140px 48px 120px;
background:
radial-gradient(ellipse 70% 50% at 20% 30%, oklch(62% 0.22 240 / 0.15) 0%, transparent 65%),
radial-gradient(ellipse 60% 50% at 90% 80%, oklch(62% 0.22 240 / 0.08) 0%, transparent 60%),
linear-gradient(180deg, oklch(11% 0.015 240) 0%, oklch(14% 0.018 240) 100%);
overflow: hidden;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.operator-section::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(oklch(62% 0.22 240 / 0.06) 1px, transparent 1px),
linear-gradient(90deg, oklch(62% 0.22 240 / 0.06) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%);
pointer-events: none;
}
.operator-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: 80px;
align-items: center;
max-width: 1400px;
margin: 0 auto;
}
.operator-left {
position: relative;
}
.operator-pill {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--accent);
padding: 8px 16px 8px 14px;
border: 1px solid var(--accent);
border-radius: 999px;
background: oklch(62% 0.22 240 / 0.12);
margin-bottom: 28px;
backdrop-filter: blur(8px);
}
.operator-pill-tag {
font-size: 9px;
font-weight: 800;
padding: 3px 7px;
background: var(--accent);
color: #fff;
border-radius: 3px;
letter-spacing: 0.18em;
margin-left: 2px;
}
.operator-eyebrow {
font-family: var(--display);
font-size: 22px;
letter-spacing: 0.22em;
color: var(--fg-dim);
margin-bottom: 8px;
}
.operator-eyebrow strong {
color: var(--fg);
font-weight: inherit;
}
.operator-title {
font-family: var(--display);
font-size: clamp(64px, 8vw, 124px);
line-height: 0.92;
letter-spacing: 0.02em;
color: var(--fg);
margin-bottom: 28px;
}
.operator-title em {
font-style: normal;
color: var(--accent);
display: block;
}
.operator-tagline {
font-size: 19px;
line-height: 1.55;
color: var(--fg);
font-weight: 400;
margin-bottom: 16px;
text-wrap: balance;
}
.operator-desc {
font-size: 16px;
line-height: 1.7;
color: var(--fg-dim);
font-weight: 300;
margin-bottom: 32px;
max-width: 560px;
}
.operator-features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px 24px;
margin-bottom: 40px;
max-width: 560px;
}
.operator-feature {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--fg);
font-weight: 500;
letter-spacing: 0.02em;
}
.operator-feature-dot {
width: 6px;
height: 6px;
background: var(--accent);
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 8px 1px oklch(62% 0.22 240 / 0.6);
}
.operator-feature-more {
font-style: italic;
color: var(--accent);
font-weight: 600;
}
.operator-actions {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
/* Right: Dashboard mockup */
.operator-mock {
position: relative;
perspective: 1800px;
}
.operator-mock-frame {
position: relative;
background: oklch(8% 0.01 240);
border: 1px solid oklch(35% 0.04 240);
border-radius: 12px;
overflow: hidden;
box-shadow:
0 0 0 1px oklch(20% 0.02 240),
0 30px 80px -20px oklch(62% 0.22 240 / 0.3),
0 60px 120px -40px rgba(0,0,0,0.6);
transform: rotateY(-8deg) rotateX(4deg) rotate(0.5deg);
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.operator-mock-frame:hover {
transform: rotateY(-4deg) rotateX(2deg) rotate(0deg);
}
.operator-mock-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: oklch(12% 0.012 240);
border-bottom: 1px solid oklch(22% 0.02 240);
}
.operator-mock-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: oklch(30% 0.02 240);
}
.operator-mock-bar-url {
margin-left: 12px;
flex: 1;
background: oklch(15% 0.012 240);
padding: 5px 12px;
border-radius: 4px;
font-family: monospace;
font-size: 10px;
color: var(--fg-dim);
letter-spacing: 0.05em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.operator-mock-body {
display: grid;
grid-template-columns: 180px 1fr;
min-height: 440px;
background: oklch(10% 0.012 240);
}
.operator-mock-sidebar {
background: oklch(8% 0.01 240);
border-right: 1px solid oklch(20% 0.02 240);
padding: 20px 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.operator-mock-logo {
font-family: var(--display);
font-size: 16px;
letter-spacing: 0.05em;
color: var(--fg);
padding: 6px 10px;
margin-bottom: 16px;
}
.operator-mock-logo span { color: var(--accent); }
.operator-mock-nav {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: 4px;
font-size: 12px;
color: oklch(65% 0.01 240);
transition: background 0.2s, color 0.2s;
cursor: default;
}
.operator-mock-nav.active {
background: var(--accent-dim);
color: var(--accent);
font-weight: 600;
}
.operator-mock-nav-icon {
width: 14px;
height: 14px;
border-radius: 3px;
background: currentColor;
opacity: 0.7;
flex-shrink: 0;
}
.operator-mock-main {
padding: 20px 22px;
overflow: hidden;
}
.operator-mock-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.operator-mock-h1 {
font-family: var(--display);
font-size: 18px;
letter-spacing: 0.04em;
color: var(--fg);
}
.operator-mock-badge {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #fff;
padding: 4px 9px;
background: var(--accent);
border-radius: 999px;
}
.operator-mock-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 18px;
}
.operator-mock-stat {
background: oklch(13% 0.014 240);
border: 1px solid oklch(22% 0.02 240);
border-radius: 6px;
padding: 12px 14px;
}
.operator-mock-stat-label {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--fg-dim);
margin-bottom: 4px;
}
.operator-mock-stat-value {
font-family: var(--display);
font-size: 22px;
letter-spacing: 0.02em;
color: var(--fg);
line-height: 1;
}
.operator-mock-stat-value span { color: var(--accent); font-size: 11px; margin-left: 4px; }
.operator-mock-card {
background: oklch(13% 0.014 240);
border: 1px solid oklch(22% 0.02 240);
border-radius: 6px;
padding: 14px;
margin-bottom: 10px;
}
.operator-mock-card-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--fg-dim);
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.operator-mock-card-title-dot {
width: 6px;
height: 6px;
background: var(--accent);
border-radius: 50%;
margin-left: 4px;
}
.operator-mock-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0;
border-bottom: 1px solid oklch(20% 0.02 240);
font-size: 11px;
}
.operator-mock-row:last-child { border-bottom: none; }
.operator-mock-row-label {
color: var(--fg);
display: flex;
align-items: center;
gap: 8px;
}
.operator-mock-row-dot {
width: 6px;
height: 6px;
border-radius: 50%;
}
.operator-mock-row-dot.green { background: oklch(70% 0.18 145); }
.operator-mock-row-dot.amber { background: oklch(75% 0.16 75); }
.operator-mock-row-dot.blue { background: var(--accent); }
.operator-mock-row-value {
color: var(--fg-dim);
font-family: monospace;
font-size: 10px;
}
.operator-mock-chart {
height: 80px;
margin-top: 10px;
position: relative;
display: flex;
align-items: flex-end;
gap: 4px;
}
.operator-mock-chart-bar {
flex: 1;
background: linear-gradient(180deg, var(--accent) 0%, oklch(62% 0.22 240 / 0.3) 100%);
border-radius: 2px 2px 0 0;
opacity: 0.85;
}
/* Floating tag overlays */
.operator-tag {
position: absolute;
background: oklch(10% 0.012 240);
border: 1px solid var(--accent);
padding: 8px 12px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--fg);
box-shadow: 0 12px 32px -8px oklch(62% 0.22 240 / 0.4);
display: flex;
align-items: center;
gap: 8px;
z-index: 2;
backdrop-filter: blur(8px);
background: oklch(10% 0.012 240 / 0.9);
}
.operator-tag-1 {
top: -16px;
right: -12px;
animation: float-1 6s ease-in-out infinite;
}
.operator-tag-2 {
bottom: 40px;
left: -30px;
animation: float-2 7s ease-in-out infinite;
}
.operator-tag-dot {
width: 8px;
height: 8px;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 8px 1px var(--accent);
}
@keyframes float-1 {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes float-2 {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(8px); }
}
@media (max-width: 1000px) {
.operator-inner {
grid-template-columns: 1fr;
gap: 60px;
}
.operator-mock-frame {
transform: rotate(0);
}
}
@media (max-width: 700px) {
.operator-section { padding: 80px 24px; }
.operator-features { grid-template-columns: 1fr; }
.operator-mock-body { grid-template-columns: 1fr; min-height: auto; }
.operator-mock-sidebar { display: none; }
.operator-tag { display: none; }
}
/* --- SERVICES (NEW CARDS) --- */
.services-grid-new {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
position: relative;
}
.service-card-new-link {
text-decoration: none;
color: inherit;
display: flex;
}
.service-card-new {
position: relative;
flex: 1;
background:
radial-gradient(ellipse 80% 60% at 100% 0%, oklch(62% 0.22 240 / 0.1) 0%, transparent 60%),
linear-gradient(155deg, oklch(16% 0.014 240) 0%, oklch(12% 0.012 240) 100%);
border: 1px solid oklch(26% 0.025 240);
border-radius: 6px;
padding: 40px 36px 28px;
overflow: hidden;
isolation: isolate;
transition:
transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.3s,
box-shadow 0.4s;
min-height: 480px;
display: flex;
flex-direction: column;
}
.service-card-new:hover {
transform: translateY(-6px);
border-color: var(--accent);
box-shadow:
0 16px 60px -16px oklch(62% 0.22 240 / 0.5),
0 32px 100px -40px rgba(0,0,0,0.6);
}
.service-card-new:hover .service-card-bg-mark { color: oklch(22% 0.05 240); transform: translate(8px, 0) rotate(-1deg); }
.service-card-new:hover .service-card-glow { opacity: 1; }
.service-card-new:hover .service-card-explore-arrow { transform: translateX(6px); }
.service-card-bg-mark {
position: absolute;
top: -32px;
right: -36px;
font-family: var(--display);
font-size: clamp(140px, 14vw, 220px);
letter-spacing: 0.04em;
color: oklch(17% 0.025 240);
line-height: 0.85;
pointer-events: none;
user-select: none;
z-index: 0;
transform: rotate(-2deg);
transition: color 0.35s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
white-space: nowrap;
}
.service-card-stripes {
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
-45deg,
transparent 0,
transparent 28px,
oklch(62% 0.22 240 / 0.025) 28px,
oklch(62% 0.22 240 / 0.025) 30px
);
mask-image: linear-gradient(to bottom right, transparent 40%, black 100%);
pointer-events: none;
z-index: 0;
}
.service-card-grid-overlay {
position: absolute;
inset: 0;
background-image:
linear-gradient(oklch(62% 0.22 240 / 0.04) 1px, transparent 1px),
linear-gradient(90deg, oklch(62% 0.22 240 / 0.04) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(ellipse 60% 70% at 20% 30%, black 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.service-card-glow {
position: absolute;
inset: -1px;
border-radius: 6px;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s;
background: linear-gradient(135deg, transparent 40%, oklch(62% 0.22 240 / 0.18) 100%);
z-index: 0;
}
.service-card-top {
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 28px;
}
.service-card-num {
font-family: var(--display);
font-size: 22px;
letter-spacing: 0.15em;
color: var(--accent);
line-height: 1;
padding-top: 14px;
position: relative;
}
.service-card-num::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 32px;
height: 2px;
background: var(--accent);
}
.service-card-icon-wrap {
position: relative;
}
.service-card-icon {
width: 60px;
height: 60px;
background: oklch(62% 0.22 240 / 0.12);
border: 1px solid oklch(62% 0.22 240 / 0.35);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: background 0.3s, transform 0.3s;
}
.service-card-icon::before {
content: '';
position: absolute;
top: -4px; left: -4px;
width: 8px; height: 8px;
border-top: 1px solid var(--accent);
border-left: 1px solid var(--accent);
}
.service-card-icon::after {
content: '';
position: absolute;
bottom: -4px; right: -4px;
width: 8px; height: 8px;
border-bottom: 1px solid var(--accent);
border-right: 1px solid var(--accent);
}
.service-card-icon svg {
width: 28px; height: 28px;
stroke: var(--accent);
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.service-card-new:hover .service-card-icon {
background: oklch(62% 0.22 240 / 0.22);
}
.service-card-mid {
position: relative;
z-index: 1;
margin-bottom: 18px;
min-height: 120px;
}
.service-card-brand-pri-new {
font-family: var(--display);
font-size: 14px;
letter-spacing: 0.22em;
color: var(--fg-dim);
margin-bottom: 4px;
}
.service-card-brand-sec-new {
font-family: var(--display);
font-size: clamp(48px, 5.5vw, 72px);
letter-spacing: 0.03em;
line-height: 0.92;
color: var(--fg);
margin: 0 0 14px;
}
.service-card-tagline {
font-style: italic;
font-size: 14px;
font-weight: 400;
color: var(--accent);
letter-spacing: 0.02em;
}
.service-card-desc-new {
position: relative;
z-index: 1;
font-size: 14.5px;
line-height: 1.7;
color: var(--fg-dim);
font-weight: 300;
margin-bottom: 22px;
max-width: 96%;
}
.service-chips {
position: relative;
z-index: 1;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 24px;
}
.service-chips li {
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--fg);
padding: 6px 11px;
background: oklch(15% 0.018 240);
border: 1px solid oklch(26% 0.03 240);
border-radius: 999px;
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.service-card-new:hover .service-chips li {
border-color: oklch(40% 0.05 240);
}
.service-chips li:hover {
background: oklch(62% 0.22 240 / 0.15);
border-color: var(--accent);
color: var(--accent);
}
.service-card-bottom {
position: relative;
z-index: 1;
margin-top: auto;
padding-top: 22px;
border-top: 1px solid oklch(24% 0.025 240);
display: flex;
align-items: center;
justify-content: space-between;
}
.service-card-explore {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
}
.service-card-explore-arrow {
display: inline-flex;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card-count {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--fg-dim);
}
@media (max-width: 900px) {
.services-grid-new { grid-template-columns: 1fr; }
.service-card-new { min-height: auto; padding: 32px 28px 24px; }
.service-card-brand-sec-new { font-size: clamp(44px, 9vw, 64px); }
}
/* Coming Soon: use new card style + badge */
.coming-soon-grid-new {
position: relative;
z-index: 2;
max-width: 1100px;
margin: 0 auto;
}
.service-card-new-soon::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
z-index: 1;
}
.service-card-num-soon {
color: oklch(60% 0.04 240);
}
.service-card-num-soon::before {
background: oklch(60% 0.04 240);
}
.service-card-soon-badge {
position: absolute;
top: -10px;
right: -8px;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #fff;
padding: 5px 11px 5px 18px;
background: var(--accent);
border-radius: 999px;
white-space: nowrap;
box-shadow: 0 0 0 3px oklch(62% 0.22 240 / 0.25), 0 6px 16px -4px oklch(62% 0.22 240 / 0.6);
animation: glow-pulse 2.5s ease-in-out infinite;
}
.service-card-soon-badge-dot {
position: absolute;
left: 7px;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 5px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 6px 1px rgba(255,255,255,0.9);
animation: pulse-dot 1.4s ease-in-out infinite;
}
@media (max-width: 900px) {
.coming-soon-grid-new { max-width: 100%; }
}
/* ============================================================ */
/* COMPANY STORE SECTION */
/* ============================================================ */
.store-section {
position: relative;
padding: 140px 48px 120px;
background: oklch(13% 0.013 240);
overflow: hidden;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
isolation: isolate;
}
.store-bg-mark {
position: absolute;
top: 40px;
right: -60px;
font-family: var(--display);
font-size: clamp(280px, 32vw, 520px);
line-height: 0.82;
color: oklch(17% 0.025 240);
letter-spacing: 0.04em;
pointer-events: none;
user-select: none;
z-index: 0;
}
.store-grid-lines {
position: absolute;
inset: 0;
background-image:
linear-gradient(oklch(62% 0.22 240 / 0.05) 1px, transparent 1px),
linear-gradient(90deg, oklch(62% 0.22 240 / 0.05) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%);
pointer-events: none;
z-index: 0;
}
.store-inner {
position: relative;
z-index: 1;
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: 72px;
align-items: center;
}
.store-left { position: relative; }
.store-pill {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--accent);
padding: 8px 16px 8px 14px;
border: 1px solid var(--accent);
border-radius: 999px;
background: oklch(62% 0.22 240 / 0.12);
margin-bottom: 28px;
}
.store-pill-dot {
width: 7px;
height: 7px;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 10px 2px var(--accent);
animation: pulse-dot 1.4s ease-in-out infinite;
}
.store-title {
font-family: var(--display);
font-size: clamp(56px, 7vw, 104px);
line-height: 0.92;
letter-spacing: 0.02em;
color: var(--fg);
margin-bottom: 24px;
text-wrap: balance;
}
.store-title em {
font-style: normal;
color: var(--accent);
}
.store-tagline {
font-size: 18px;
line-height: 1.6;
color: oklch(78% 0.02 240);
font-weight: 300;
margin-bottom: 36px;
max-width: 560px;
}
.store-stack {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 36px;
max-width: 560px;
}
.store-step {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 18px;
background: oklch(15% 0.014 240);
border: 1px solid oklch(24% 0.02 240);
border-radius: 4px;
transition: border-color 0.2s, background 0.2s;
}
.store-step:hover {
border-color: var(--accent);
background: oklch(17% 0.018 240);
}
.store-step-num {
font-family: var(--display);
font-size: 26px;
letter-spacing: 0.04em;
color: var(--accent);
line-height: 1;
width: 38px;
flex-shrink: 0;
}
.store-step-label {
font-size: 15px;
font-weight: 600;
color: var(--fg);
letter-spacing: 0.02em;
}
.store-step-desc {
font-size: 13px;
color: var(--fg-dim);
margin-top: 2px;
}
.store-actions {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.store-cta-btn {
display: inline-flex;
align-items: center;
gap: 10px;
}
.store-cta-arrow {
transition: transform 0.3s;
display: inline-block;
}
.store-cta-btn:hover .store-cta-arrow { transform: translateX(4px); }
.store-trust {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
font-size: 12px;
color: var(--fg-dim);
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 600;
}
.store-trust-sep { opacity: 0.4; }
/* Right preview */
.store-preview {
position: relative;
perspective: 1800px;
}
.store-preview-frame {
background: oklch(8% 0.01 240);
border: 1px solid oklch(35% 0.04 240);
border-radius: 12px;
overflow: hidden;
box-shadow:
0 0 0 1px oklch(20% 0.02 240),
0 30px 80px -20px oklch(62% 0.22 240 / 0.4),
0 60px 120px -40px rgba(0,0,0,0.7);
transform: rotateY(-8deg) rotateX(3deg) rotate(0.5deg);
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.store-preview-frame:hover {
transform: rotateY(-4deg) rotateX(1.5deg) rotate(0deg);
}
.store-preview-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px;
background: oklch(10% 0.012 240);
border-bottom: 1px solid oklch(20% 0.02 240);
gap: 12px;
}
.store-preview-brand {
display: flex;
align-items: center;
gap: 12px;
}
.store-preview-logo {
width: 36px;
height: 36px;
background: var(--accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--display);
font-size: 15px;
color: #fff;
letter-spacing: 0.04em;
}
.store-preview-shop {
font-family: var(--display);
font-size: 16px;
letter-spacing: 0.06em;
color: var(--fg);
}
.store-preview-shop-sub {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--fg-dim);
margin-top: 1px;
}
.store-preview-cart {
font-family: var(--body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--fg);
padding: 7px 14px;
border: 1px solid oklch(28% 0.025 240);
border-radius: 999px;
background: oklch(13% 0.014 240);
}
.store-preview-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: oklch(20% 0.02 240);
}
.store-preview-card {
background: oklch(10% 0.012 240);
padding: 18px 16px;
display: flex;
flex-direction: column;
gap: 6px;
transition: background 0.2s;
}
.store-preview-card:hover {
background: oklch(13% 0.016 240);
}
.store-preview-card-img {
aspect-ratio: 1.1 / 1;
background:
radial-gradient(ellipse 70% 60% at 50% 20%, oklch(62% 0.22 240 / 0.12) 0%, transparent 70%),
oklch(14% 0.015 240);
border: 1px solid oklch(22% 0.025 240);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
position: relative;
overflow: hidden;
}
.store-preview-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 60%;
height: 60%;
color: var(--accent);
}
.store-preview-card-icon svg {
width: 100%;
height: 100%;
}
.store-preview-card-img::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(155deg, oklch(62% 0.22 240 / 0.06) 0%, transparent 60%);
pointer-events: none;
}
.store-preview-card-name {
font-size: 11px;
font-weight: 600;
color: var(--fg);
letter-spacing: 0.02em;
}
.store-preview-card-bottom {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 2px;
}
.store-preview-card-branded {
font-size: 8px;
font-weight: 800;
letter-spacing: 0.2em;
color: var(--accent);
padding: 3px 6px;
background: oklch(62% 0.22 240 / 0.15);
border-radius: 2px;
}
.store-preview-card-btn {
font-family: var(--body);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #fff;
background: var(--accent);
border: none;
padding: 4px 9px;
border-radius: 2px;
cursor: pointer;
}
.store-preview-footer {
text-align: center;
padding: 14px;
background: oklch(9% 0.012 240);
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--fg-dim);
border-top: 1px solid oklch(20% 0.02 240);
}
.store-preview-footer strong { color: var(--accent); font-weight: 700; }
.store-preview-badge {
position: absolute;
z-index: 5;
background: oklch(10% 0.012 240 / 0.92);
backdrop-filter: blur(10px);
border: 1px solid var(--accent);
padding: 8px 12px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--fg);
box-shadow: 0 12px 32px -8px oklch(62% 0.22 240 / 0.5);
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.store-preview-badge-1 {
top: 40px;
right: -28px;
animation: float-1 6s ease-in-out infinite;
}
.store-preview-badge-2 {
bottom: 40px;
left: -36px;
animation: float-2 7s ease-in-out infinite;
}
@media (max-width: 1100px) {
.store-inner { grid-template-columns: 1fr; gap: 56px; }
.store-preview-frame { transform: rotate(0); }
.store-bg-mark { font-size: clamp(180px, 40vw, 300px); }
}
@media (max-width: 700px) {
.store-section { padding: 80px 24px; }
.store-stack { gap: 10px; }
.store-step { padding: 12px 14px; }
.store-preview-badge { display: none; }
.store-preview-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================ */
/* STORE WIZARD MODAL */
/* ============================================================ */
.wiz-overlay {
position: fixed;
inset: 0;
z-index: 10000;
background: oklch(8% 0.01 240 / 0.88);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
animation: wiz-fade 0.25s ease-out;
}
@keyframes wiz-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.wiz-shell {
background: var(--bg);
border: 1px solid oklch(30% 0.03 240);
border-radius: 12px;
width: 100%;
max-width: 820px;
max-height: 92vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow:
0 40px 100px -20px oklch(62% 0.22 240 / 0.4),
0 60px 140px -40px rgba(0,0,0,0.7);
animation: wiz-up 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes wiz-up {
from { transform: translateY(24px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.wiz-header {
background:
radial-gradient(ellipse 80% 100% at 50% 0%, oklch(62% 0.22 240 / 0.18) 0%, transparent 70%),
linear-gradient(180deg, oklch(12% 0.014 240) 0%, oklch(15% 0.018 240) 100%);
padding: 28px 36px 26px;
position: relative;
border-bottom: 1px solid oklch(24% 0.025 240);
}
.wiz-close {
position: absolute;
top: 18px;
right: 18px;
width: 32px;
height: 32px;
background: oklch(20% 0.02 240);
border: 1px solid oklch(28% 0.025 240);
color: var(--fg);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.wiz-close:hover { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.wiz-header-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 14px;
}
.wiz-header-dot {
width: 6px;
height: 6px;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 8px 1px var(--accent);
animation: pulse-dot 1.4s ease-in-out infinite;
}
.wiz-header-title {
font-family: var(--display);
font-size: 32px;
letter-spacing: 0.04em;
color: var(--fg);
line-height: 1;
}
.wiz-header-title em {
font-style: normal;
color: var(--accent);
margin: 0 4px;
}
.wiz-progress {
display: flex;
align-items: center;
margin-top: 22px;
gap: 0;
}
.wiz-progress-step {
display: flex;
align-items: center;
flex: 1;
}
.wiz-progress-step:last-child { flex: 0; }
.wiz-progress-dot {
width: 26px;
height: 26px;
background: oklch(22% 0.02 240);
border: 2px solid oklch(28% 0.025 240);
color: var(--fg-dim);
border-radius: 50%;
font-size: 11px;
font-weight: 700;
font-family: var(--body);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s, border-color 0.3s, color 0.3s;
flex-shrink: 0;
}
.wiz-progress-step.done .wiz-progress-dot {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.wiz-progress-step.active .wiz-progress-dot {
box-shadow: 0 0 0 4px oklch(62% 0.22 240 / 0.25);
}
.wiz-progress-bar {
flex: 1;
height: 2px;
background: oklch(22% 0.02 240);
margin: 0 6px;
transition: background 0.3s;
}
.wiz-progress-step.done .wiz-progress-bar { background: var(--accent); }
.wiz-body {
flex: 1;
overflow-y: auto;
padding: 32px 36px;
background: var(--bg);
}
.wiz-intro {
font-size: 14.5px;
color: var(--fg-dim);
line-height: 1.7;
margin-bottom: 24px;
font-weight: 300;
}
.wiz-products-warn { color: oklch(78% 0.15 25); font-style: normal; font-weight: 600; }
.wiz-field {
display: flex;
flex-direction: column;
margin-bottom: 18px;
}
.wiz-field-label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--fg-dim);
margin-bottom: 8px;
}
.wiz-field-error {
margin-top: 6px;
font-size: 12px;
color: oklch(72% 0.18 25);
font-weight: 600;
}
.wiz-field-hint {
margin-top: 6px;
font-size: 12px;
color: var(--fg-dim);
}
.wiz-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.wiz-input {
width: 100%;
padding: 13px 15px;
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 2px;
color: var(--fg);
font-family: var(--body);
font-size: 15px;
outline: none;
transition: border-color 0.2s, background 0.2s;
}
.wiz-input:focus {
border-color: var(--accent);
background: oklch(17% 0.018 240);
}
.wiz-input.error {
border-color: oklch(60% 0.2 25);
}
.wiz-input::placeholder { color: oklch(45% 0.012 240); }
/* URL row */
.wiz-url-wrap {
display: flex;
align-items: stretch;
border: 1px solid var(--border);
background: var(--bg2);
border-radius: 2px;
overflow: hidden;
transition: border-color 0.2s;
}
.wiz-url-wrap.ok { border-color: oklch(60% 0.18 145); }
.wiz-url-wrap.error { border-color: oklch(60% 0.2 25); }
.wiz-url-prefix, .wiz-url-suffix {
padding: 13px 14px;
background: oklch(13% 0.014 240);
color: var(--fg-dim);
font-family: monospace;
font-size: 14px;
border-right: 1px solid var(--border);
white-space: nowrap;
}
.wiz-url-suffix {
border-right: none;
border-left: 1px solid var(--border);
}
.wiz-url-input {
flex: 1;
border: none;
padding: 13px 14px;
background: var(--bg2);
color: var(--accent);
font-family: monospace;
font-size: 15px;
font-weight: 700;
outline: none;
min-width: 0;
}
.wiz-availability {
margin-top: 10px;
font-size: 13px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.wiz-availability.ok { color: oklch(75% 0.18 145); }
.wiz-availability.bad { color: oklch(72% 0.18 25); }
.wiz-availability-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: currentColor;
color: var(--bg);
font-size: 11px;
font-weight: 800;
}
.wiz-preview-box {
margin-top: 28px;
padding: 18px 20px;
background: oklch(62% 0.22 240 / 0.08);
border-left: 3px solid var(--accent);
border-radius: 0 4px 4px 0;
}
.wiz-preview-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 6px;
}
.wiz-preview-url {
font-family: monospace;
font-size: 16px;
color: var(--fg);
font-weight: 500;
}
.wiz-preview-url em {
font-style: normal;
color: var(--accent);
font-weight: 700;
}
/* Drop zone */
.wiz-drop {
display: block;
border: 2px dashed oklch(30% 0.03 240);
border-radius: 8px;
padding: 48px 24px;
text-align: center;
background: var(--bg2);
transition: all 0.2s;
cursor: pointer;
}
.wiz-drop:hover, .wiz-drop.over {
border-color: var(--accent);
background: oklch(62% 0.22 240 / 0.06);
}
.wiz-drop.error { border-color: oklch(60% 0.2 25); }
.wiz-drop-empty { color: var(--fg-dim); }
.wiz-drop-empty svg { color: var(--fg-dim); margin-bottom: 16px; }
.wiz-drop:hover .wiz-drop-empty svg { color: var(--accent); }
.wiz-drop-title {
font-family: var(--display);
font-size: 22px;
letter-spacing: 0.06em;
color: var(--fg);
margin-bottom: 6px;
}
.wiz-drop-sub {
font-size: 13px;
color: var(--fg-dim);
}
.wiz-drop-preview {
display: flex;
flex-direction: column;
align-items: center;
}
.wiz-drop-preview-img {
width: 140px;
height: 140px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.wiz-drop-preview-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.wiz-drop-success {
font-size: 13px;
color: oklch(75% 0.18 145);
font-weight: 700;
letter-spacing: 0.05em;
margin-bottom: 4px;
}
.wiz-drop-filename {
font-size: 12px;
color: var(--fg-dim);
}
.wiz-drop-replace {
margin-top: 14px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent);
text-decoration: underline;
}
/* Products grid */
.wiz-products-counter {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--fg-dim);
margin-bottom: 14px;
}
.wiz-products-counter strong { color: var(--accent); }
.wiz-products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 10px;
}
.wiz-product {
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 4px;
padding: 14px;
cursor: pointer;
transition: border-color 0.2s, background 0.2s, transform 0.2s;
text-align: left;
color: var(--fg);
font-family: var(--body);
position: relative;
}
.wiz-product:hover {
border-color: var(--accent);
transform: translateY(-2px);
}
.wiz-product.selected {
border-color: var(--accent);
background: oklch(62% 0.22 240 / 0.08);
}
.wiz-product-img {
aspect-ratio: 1.1 / 1;
background: oklch(15% 0.014 240);
border: 1px solid oklch(22% 0.02 240);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
margin-bottom: 10px;
position: relative;
}
.wiz-product-check {
position: absolute;
top: 6px;
right: 6px;
width: 22px;
height: 22px;
background: var(--accent);
color: #fff;
border-radius: 50%;
font-size: 12px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}
.wiz-product-cat {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 4px;
}
.wiz-product-name {
font-size: 13.5px;
font-weight: 600;
color: var(--fg);
margin-bottom: 4px;
line-height: 1.3;
}
.wiz-product-price {
font-family: var(--display);
font-size: 16px;
letter-spacing: 0.04em;
color: var(--fg);
}
/* Customize colors */
.wiz-section-label {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.25em;
color: var(--fg-dim);
margin-bottom: 12px;
}
.wiz-colors {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
}
.wiz-color {
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 4px;
padding: 14px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
transition: border-color 0.2s, background 0.2s;
color: var(--fg);
font-family: var(--body);
}
.wiz-color:hover { border-color: var(--accent); }
.wiz-color.selected {
border-color: var(--accent);
background: oklch(62% 0.22 240 / 0.08);
box-shadow: 0 0 0 1px var(--accent);
}
.wiz-color-chip {
width: 56px;
height: 56px;
border-radius: 50%;
border: 2px solid oklch(20% 0.02 240);
box-shadow: 0 6px 18px -4px rgba(0,0,0,0.4);
}
.wiz-color-label {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--fg);
}
.wiz-layouts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.wiz-layout {
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 4px;
padding: 16px;
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
color: var(--fg);
font-family: var(--body);
text-align: left;
}
.wiz-layout:hover { border-color: var(--accent); }
.wiz-layout.selected {
border-color: var(--accent);
background: oklch(62% 0.22 240 / 0.08);
box-shadow: 0 0 0 1px var(--accent);
}
.wiz-layout-preview {
background: oklch(10% 0.012 240);
border-radius: 4px;
padding: 14px;
margin-bottom: 14px;
}
.wiz-layout-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.wiz-layout-grid span {
aspect-ratio: 1;
background: oklch(20% 0.02 240);
border-radius: 2px;
}
.wiz-layout-editorial {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 6px;
height: 100px;
}
.wiz-layout-editorial .hero {
grid-row: span 3;
background: oklch(28% 0.04 240);
border-radius: 2px;
}
.wiz-layout-editorial span:not(.hero) {
background: oklch(20% 0.02 240);
border-radius: 2px;
}
.wiz-layout-name {
font-family: var(--display);
font-size: 18px;
letter-spacing: 0.06em;
color: var(--fg);
margin-bottom: 4px;
}
.wiz-layout-desc {
font-size: 12px;
color: var(--fg-dim);
}
/* Launched */
.wiz-launched {
text-align: center;
padding: 16px 0;
}
.wiz-launched-check {
width: 96px;
height: 96px;
border-radius: 50%;
background: oklch(62% 0.22 240 / 0.15);
border: 2px solid var(--accent);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
box-shadow: 0 0 0 8px oklch(62% 0.22 240 / 0.08);
}
.wiz-launched-eyebrow {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 10px;
}
.wiz-launched-title {
font-family: var(--display);
font-size: 48px;
letter-spacing: 0.03em;
line-height: 1;
margin-bottom: 16px;
text-wrap: balance;
}
.wiz-launched-title em {
font-style: normal;
color: var(--accent);
}
.wiz-launched-url {
font-family: monospace;
font-size: 16px;
color: var(--fg);
padding: 12px 18px;
background: oklch(62% 0.22 240 / 0.1);
border: 1px solid var(--accent);
border-radius: 4px;
display: inline-block;
margin-bottom: 22px;
}
.wiz-launched-url em {
font-style: normal;
color: var(--accent);
font-weight: 700;
}
.wiz-launched-copy {
font-size: 14.5px;
line-height: 1.7;
color: var(--fg-dim);
max-width: 520px;
margin: 0 auto 28px;
font-weight: 300;
}
.wiz-launched-copy strong { color: var(--fg); font-weight: 600; }
.wiz-launched-summary {
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 6px;
max-width: 520px;
margin: 0 auto;
text-align: left;
}
.wiz-launched-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
border-bottom: 1px solid var(--border);
font-size: 13px;
}
.wiz-launched-row:last-child { border-bottom: none; }
.wiz-launched-row-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--fg-dim);
}
.wiz-launched-row-val {
color: var(--fg);
font-family: monospace;
font-size: 13px;
}
/* Wizard footer */
.wiz-footer {
padding: 18px 32px;
background: oklch(11% 0.012 240);
border-top: 1px solid oklch(24% 0.025 240);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.wiz-back-btn {
background: transparent;
color: var(--fg-dim);
border: 1px solid var(--border);
padding: 11px 24px;
font-family: var(--body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
border-radius: 2px;
cursor: pointer;
transition: border-color 0.2s, color 0.2s;
}
.wiz-back-btn:hover { border-color: var(--accent); color: var(--accent); }
.wiz-next-btn, .wiz-launch-btn, .wiz-done-btn {
background: var(--accent);
color: #fff;
border: none;
padding: 12px 26px;
font-family: var(--body);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
border-radius: 2px;
cursor: pointer;
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 8px;
transition: filter 0.2s, transform 0.2s;
}
.wiz-next-btn:hover, .wiz-launch-btn:hover, .wiz-done-btn:hover {
filter: brightness(1.1);
transform: translateY(-1px);
}
.wiz-launch-btn { box-shadow: 0 0 0 3px oklch(62% 0.22 240 / 0.25), 0 12px 32px -8px oklch(62% 0.22 240 / 0.5); }
@media (max-width: 600px) {
.wiz-shell { max-height: 100vh; border-radius: 0; }
.wiz-overlay { padding: 0; }
.wiz-header { padding: 22px 24px 18px; }
.wiz-header-title { font-size: 24px; }
.wiz-body { padding: 24px; }
.wiz-footer { padding: 14px 20px; }
.wiz-grid-2 { grid-template-columns: 1fr; }
.wiz-layouts { grid-template-columns: 1fr; }
.wiz-launched-title { font-size: 36px; }
}
/* ============================================================ */
/* SERVICE DETAIL PAGE STYLES */
/* ============================================================ */
.sp-hero {
min-height: 70vh;
display: flex;
align-items: center;
padding: 140px 48px 100px;
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse 60% 80% at 80% 50%, oklch(62% 0.22 240 / 0.08) 0%, transparent 60%),
linear-gradient(160deg, var(--bg) 0%, oklch(14% 0.015 240) 100%);
}
.sp-hero-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--border) 1px, transparent 1px),
linear-gradient(90deg, var(--border) 1px, transparent 1px);
background-size: 80px 80px;
opacity: 0.3;
mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 70%);
}
.sp-hero-content {
position: relative;
z-index: 2;
max-width: 900px;
}
.sp-eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--display);
font-size: 18px;
letter-spacing: 0.2em;
color: var(--fg-dim);
margin-bottom: 32px;
}
.sp-eyebrow span {
color: var(--accent);
}
.sp-eyebrow::before {
content: '';
width: 40px;
height: 1px;
background: var(--accent);
}
.sp-hero-title {
font-family: var(--display);
font-size: clamp(60px, 9vw, 140px);
line-height: 0.92;
letter-spacing: 0.02em;
margin-bottom: 32px;
text-wrap: balance;
}
.sp-hero-title em {
font-style: normal;
color: var(--accent);
}
.sp-hero-sub {
font-size: 18px;
line-height: 1.65;
color: var(--fg-dim);
max-width: 640px;
margin-bottom: 44px;
font-weight: 300;
}
.sp-hero-sub strong { color: var(--fg); font-weight: 500; }
.sp-hero-side {
position: absolute;
right: -60px;
top: 0;
bottom: 0;
width: 38%;
background: var(--bg2);
clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
overflow: hidden;
pointer-events: none;
}
.sp-hero-side-art {
position: absolute;
inset: 0;
background: linear-gradient(135deg, oklch(20% 0.04 240) 0%, oklch(16% 0.02 240) 100%);
display: flex;
align-items: center;
justify-content: center;
}
.sp-hero-side-mark {
font-family: var(--display);
font-size: clamp(120px, 18vw, 280px);
letter-spacing: 0.04em;
color: oklch(22% 0.04 240);
line-height: 0.85;
text-align: center;
transform: rotate(-4deg);
user-select: none;
}
.sp-section {
padding: 120px 48px;
position: relative;
}
.sp-section-alt { background: var(--bg2); }
.sp-section-header {
margin-bottom: 64px;
max-width: 720px;
}
.sp-section-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 16px;
}
.sp-section-title {
font-family: var(--display);
font-size: clamp(44px, 6vw, 80px);
line-height: 0.95;
letter-spacing: 0.02em;
margin-bottom: 20px;
}
.sp-section-sub {
font-size: 16px;
line-height: 1.7;
color: var(--fg-dim);
font-weight: 300;
}
.sp-offerings {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2px;
}
.sp-offering {
background: var(--bg2);
border: 1px solid transparent;
padding: 44px 40px;
position: relative;
transition: background 0.3s, border-color 0.3s, transform 0.3s;
display: flex;
flex-direction: column;
gap: 16px;
overflow: hidden;
}
.sp-section-alt .sp-offering { background: var(--bg3); }
.sp-offering:hover { transform: translateY(-3px); border-color: var(--accent); }
.sp-offering-num {
font-family: var(--display);
font-size: 18px;
letter-spacing: 0.15em;
color: var(--accent);
line-height: 1;
}
.sp-offering-title {
font-family: var(--display);
font-size: 32px;
letter-spacing: 0.04em;
line-height: 1.05;
color: var(--fg);
}
.sp-offering-desc {
font-size: 15px;
line-height: 1.7;
color: var(--fg-dim);
font-weight: 300;
}
.sp-offering-bullets {
list-style: none;
margin-top: 8px;
display: flex;
flex-direction: column;
gap: 8px;
}
.sp-offering-bullets li {
font-size: 13px;
color: var(--fg-dim);
padding-left: 18px;
position: relative;
line-height: 1.5;
}
.sp-offering-bullets li::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 8px;
height: 1px;
background: var(--accent);
}
.sp-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
position: relative;
}
.sp-step {
background: var(--bg3);
padding: 40px 32px;
position: relative;
overflow: hidden;
}
.sp-section-alt .sp-step { background: var(--bg2); }
.sp-step::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.sp-step:hover::after { transform: scaleX(1); }
.sp-step-num {
font-family: var(--display);
font-size: 72px;
line-height: 1;
color: oklch(30% 0.02 240);
margin-bottom: 16px;
}
.sp-step-title {
font-family: var(--display);
font-size: 22px;
letter-spacing: 0.04em;
margin-bottom: 12px;
}
.sp-step-desc {
font-size: 14px;
color: var(--fg-dim);
line-height: 1.7;
font-weight: 300;
}
.sp-back {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--fg-dim);
text-decoration: none;
margin-bottom: 24px;
transition: color 0.2s;
}
.sp-back:hover { color: var(--accent); }
.sp-back::before { content: '←'; font-size: 16px; }
.sp-cta-section {
padding: 100px 48px;
background: var(--accent);
text-align: center;
position: relative;
overflow: hidden;
}
.sp-cta-section::before {
content: attr(data-bg);
position: absolute;
font-family: var(--display);
font-size: clamp(120px, 18vw, 260px);
color: rgba(255,255,255,0.08);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
letter-spacing: 0.05em;
pointer-events: none;
white-space: nowrap;
line-height: 1;
}
.sp-cta-content {
position: relative;
z-index: 1;
}
.sp-cta-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
margin-bottom: 18px;
}
.sp-cta-title {
font-family: var(--display);
font-size: clamp(48px, 6vw, 80px);
line-height: 0.95;
letter-spacing: 0.02em;
color: #fff;
margin-bottom: 36px;
text-wrap: balance;
}
/* Service nav highlight */
.sp-nav-active {
color: var(--fg) !important;
}
@media (max-width: 900px) {
.sp-hero { padding: 110px 24px 80px; }
.sp-hero-side { display: none; }
.sp-section { padding: 80px 24px; }
.sp-offerings { grid-template-columns: 1fr; }
.sp-steps { grid-template-columns: 1fr 1fr; }
.sp-cta-section { padding: 72px 24px; }
}
@media (max-width: 560px) {
.sp-steps { grid-template-columns: 1fr; }
}
/* ============================================================ */
/* MOBILE / RESPONSIVE REFINEMENTS */
/* ============================================================ */
@media (max-width: 768px) {
/* Never allow a horizontal scrollbar from decorative/offset elements */
html, body { overflow-x: hidden; max-width: 100%; }
/* Hero: fit content height & top-align so there are no big empty gaps */
.hero { min-height: auto; align-items: flex-start; }
.hero-diagonal { display: none; }
.hero-bg, .hero-grid-lines { display: block; }
/* Homepage Contact: stack the two columns (overrides the inline grid) */
.contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
#contact { padding: 88px 24px !important; }
/* Tame oversized display headings so they fit narrow screens */
.hero-title { font-size: clamp(40px, 9vw, 64px); }
.sp-hero-title { font-size: clamp(40px, 9vw, 70px); }
.operator-title { font-size: clamp(46px, 10vw, 72px); }
.section-title { font-size: clamp(34px, 7vw, 56px); }
.sp-section-title { font-size: clamp(32px, 7vw, 52px); }
.sp-cta-title { font-size: clamp(34px, 7vw, 56px); }
.cta-band-title { font-size: clamp(30px, 6vw, 48px); }
}
@media (max-width: 480px) {
/* Tighter gutters + phone-sized headings */
.hero { padding: 104px 20px 60px; }
.sp-hero { padding: 100px 20px 64px; }
.hero-title { font-size: clamp(33px, 11vw, 46px); }
.sp-hero-title { font-size: clamp(33px, 11vw, 48px); }
.operator-title { font-size: clamp(38px, 13vw, 54px); }
.section-title { font-size: clamp(28px, 9vw, 40px); }
.sp-section-title { font-size: clamp(26px, 9vw, 38px); }
.sp-cta-title { font-size: clamp(28px, 9vw, 42px); }
.cta-band-title { font-size: clamp(26px, 8vw, 38px); }
.hero-sub, .sp-hero-sub { font-size: 15px; }
/* The brand-family row should wrap instead of overflowing */
.hero-family { margin-top: 40px; padding-top: 28px; }
.hero-family-row { flex-wrap: wrap; gap: 8px 10px; }
}