/* ==========================================================================
Rivulet IQ - Main Stylesheet
Theme: Flowing water, calm clarity, forward motion
========================================================================== */
/* ==========================================================================
1. DESIGN SYSTEM - Modern Fluid Variables & Tokens
========================================================================== */
:root {
/* Primary Colors */
--color-vivid-orange: #FF6100;
--color-black: #000000;
--color-white: #ffffff;
/* Modern Glassmorphism */
--glass-white: rgba(255, 255, 255, 0.75);
--glass-dark: rgba(0, 0, 0, 0.05);
--glass-orange: rgba(255, 97, 0, 0.08);
--glass-border-light: rgba(255, 255, 255, 0.18);
--glass-border-dark: rgba(0, 0, 0, 0.08);
--glass-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.04);
--glass-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.06);
--glass-shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.08);
/* Enhanced Liquid Gradients */
--liquid-gradient-1: linear-gradient(135deg,
rgba(255, 97, 0, 0.12) 0%,
rgba(255, 175, 63, 0.18) 50%,
rgba(243, 246, 217, 0.12) 100%);
--liquid-gradient-2: linear-gradient(225deg,
rgba(255, 97, 0, 0.18) 0%,
rgba(255, 175, 63, 0.12) 50%,
transparent 100%);
--liquid-gradient-animated: conic-gradient(from var(--gradient-angle),
rgba(255, 97, 0, 0.15) 0deg,
rgba(255, 175, 63, 0.2) 90deg,
rgba(243, 246, 217, 0.15) 180deg,
rgba(255, 175, 63, 0.2) 270deg,
rgba(255, 97, 0, 0.15) 360deg);
/* Premium Water-Flow Gradients */
--flow-gradient-primary: linear-gradient(135deg,
rgba(255, 97, 0, 0.2) 0%,
rgba(255, 175, 63, 0.15) 25%,
rgba(255, 97, 0, 0.1) 50%,
rgba(255, 175, 63, 0.15) 75%,
rgba(255, 97, 0, 0.2) 100%);
--flow-gradient-subtle: radial-gradient(ellipse at center,
rgba(255, 97, 0, 0.08) 0%,
rgba(255, 175, 63, 0.05) 40%,
transparent 70%);
--ripple-gradient: radial-gradient(circle,
rgba(255, 97, 0, 0.4) 0%,
rgba(255, 97, 0, 0.2) 30%,
rgba(255, 97, 0, 0.1) 60%,
transparent 100%);
/* Motion & Timing - Enhanced */
--ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6);
--ease-liquid: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-water-flow: cubic-bezier(0.23, 1, 0.32, 1);
--ease-gentle-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
/* 3D Transforms */
--perspective: 1200px;
--rotate-x: 0deg;
--rotate-y: 0deg;
/* Orange Shades */
--orange-100: #FFF4ED;
--orange-200: #FFE4D1;
--orange-300: #FFCAA3;
--orange-400: #FFAE75;
--orange-500: #FF9447;
--orange-600: #FF6100;
--orange-700: #CC4E00;
--orange-800: #993A00;
--orange-900: #662700;
/* Neutral Shades (Black to White) */
--neutral-900: #000000;
--neutral-800: #1A1A1A;
--neutral-700: #333333;
--neutral-600: #4D4D4D;
--neutral-500: #666666;
--neutral-400: #999999;
--neutral-300: #CCCCCC;
--neutral-200: #E6E6E6;
--neutral-100: #F5F5F5;
/* Gradient */
--gradient-main: linear-gradient(135deg, #F33311 0%, #FFAF3F 50%, #F3F6D9 100%);
--gradient-subtle: linear-gradient(180deg, rgba(255, 97, 0, 0.08) 0%, rgba(255, 97, 0, 0) 100%);
/* Typography Scale */
--font-family: 'Neue Haas Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-size-base: 16px;
--font-size-xs: 12px;
--font-size-sm: 14px;
--font-size-lg: 18px;
--font-size-xl: 24px;
--font-size-2xl: 32px;
--font-size-3xl: 48px;
--font-size-4xl: 64px;
--font-size-5xl: 80px;
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
--font-weight-black: 900;
--line-height-tight: 1.2;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;
/* Spacing Scale */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
/* Icon Sizes */
--icon-xs: 12px;
--icon-sm: 24px;
--icon-md: 48px;
--icon-lg: 56px;
/* Layout */
--container-max: 1280px;
--container-padding: var(--space-5);
--border-radius: 8px;
--border-radius-lg: 16px;
/* Transitions */
--transition-fast: 0.2s ease;
--transition-base: 0.3s ease;
--transition-slow: 0.6s ease;
--transition-flow: 0.8s cubic-bezier(0.4, 0, 0.2, 1);
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
--shadow-glow: 0 0 40px rgba(255, 97, 0, 0.2);
}
/* ==========================================================================
2. FONT FACE - Neue Haas Display
========================================================================== */
@font-face {
font-family: 'Neue Haas Display';
src: url('../assets/NeueHaasDisplayLight.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Neue Haas Display';
src: url('../assets/NeueHaasDisplayRoman.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Neue Haas Display';
src: url('../assets/NeueHaasDisplayMedium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Neue Haas Display';
src: url('../assets/NeueHaasDisplayBold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Neue Haas Display';
src: url('../assets/NeueHaasDisplayBlack.ttf') format('truetype');
font-weight: 900;
font-style: normal;
font-display: swap;
}
/* ==========================================================================
3. RESET & BASE STYLES
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-family);
font-size: var(--font-size-base);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-normal);
color: var(--color-white);
background-color: var(--color-black);
background:
radial-gradient(ellipse at 20% 80%, rgba(255, 97, 0, 0.03) 0%, transparent 50%),
radial-gradient(ellipse at 80% 20%, rgba(255, 175, 63, 0.02) 0%, transparent 50%),
linear-gradient(180deg, #000000 0%, #0A0A0A 50%, #000000 100%);
overflow-x: hidden;
position: relative;
}
/* Premium Water-Flow Background Animation */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--flow-gradient-subtle);
opacity: 0.6;
animation: flowDrift 20s ease-in-out infinite;
pointer-events: none;
z-index: -1;
}
@keyframes flowDrift {
0%,
100% {
transform: translateX(0) translateY(0) scale(1);
opacity: 0.4;
}
25% {
transform: translateX(20px) translateY(-10px) scale(1.05);
opacity: 0.6;
}
50% {
transform: translateX(-10px) translateY(15px) scale(0.95);
opacity: 0.5;
}
75% {
transform: translateX(15px) translateY(-5px) scale(1.02);
opacity: 0.7;
}
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
transition: color var(--transition-base);
}
ul,
ol {
list-style: none;
}
button {
font-family: inherit;
border: none;
cursor: pointer;
background: none;
}
/* ==========================================================================
4. UTILITY CLASSES
========================================================================== */
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-padding);
}
.section__title {
font-size: clamp(var(--font-size-2xl), 5vw, var(--font-size-4xl));
font-weight: var(--font-weight-light);
line-height: var(--line-height-tight);
margin-bottom: var(--space-5);
background: linear-gradient(90deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(255, 255, 255, 1) 20%,
rgba(255, 175, 63, 0.9) 40%,
rgba(255, 255, 255, 1) 60%,
rgba(255, 255, 255, 0.95) 100%);
background-size: 200% auto;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmerText 6s ease-in-out infinite;
position: relative;
display: inline-block;
}
@keyframes shimmerText {
0%,
100% {
background-position: 0% center;
}
50% {
background-position: 200% center;
}
}
.section__title::after {
content: '';
position: absolute;
bottom: -12px;
left: 0;
width: 60px;
height: 3px;
background: linear-gradient(90deg, var(--color-vivid-orange) 0%, transparent 100%);
border-radius: 3px;
animation: flowLineGrow 3s ease infinite;
}
@keyframes flowLineGrow {
0%,
100% {
width: 60px;
opacity: 0.7;
}
50% {
width: 80px;
opacity: 1;
box-shadow: 0 0 12px rgba(255, 97, 0, 0.6);
}
}
.section__subtitle {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-light);
line-height: var(--line-height-relaxed);
color: rgba(255, 255, 255, 0.6);
max-width: 800px;
margin: 0 auto var(--space-7);
}
/* ==========================================================================
5. BUTTONS
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-4) var(--space-6);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
border-radius: var(--border-radius);
transition: all var(--transition-base);
cursor: pointer;
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left var(--transition-flow);
}
.btn:hover::before {
left: 100%;
}
.btn--primary {
background: linear-gradient(135deg, var(--color-vivid-orange) 0%, var(--orange-700) 100%);
color: var(--color-white);
box-shadow: 0 4px 16px rgba(255, 97, 0, 0.25);
position: relative;
overflow: hidden;
}
.btn--primary::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
transform: translate(-50%, -50%);
transition: width 0.6s var(--ease-smooth), height 0.6s var(--ease-smooth);
border-radius: 50%;
}
.btn--primary:hover::before {
width: 300px;
height: 300px;
}
.btn--primary:hover {
background: linear-gradient(135deg, var(--orange-600) 0%, var(--orange-800) 100%);
transform: translateY(-3px) scale(1.02);
box-shadow: 0 12px 32px rgba(255, 97, 0, 0.45),
0 0 40px rgba(255, 97, 0, 0.3);
}
.btn--secondary {
background: rgba(255, 255, 255, 0.1);
color: var(--color-white);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.btn--secondary:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 97, 0, 0.4);
transform: translateY(-3px) scale(1.02);
box-shadow: 0 12px 32px rgba(255, 97, 0, 0.2);
}
.btn--outline {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 2px solid rgba(255, 255, 255, 0.3);
color: var(--color-white);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.btn--outline:hover {
background: rgba(255, 97, 0, 0.15);
border-color: var(--color-vivid-orange);
color: var(--color-white);
transform: translateY(-3px) scale(1.02);
box-shadow: 0 12px 32px rgba(255, 97, 0, 0.3);
}
.btn--large {
padding: var(--space-5) var(--space-8);
font-size: var(--font-size-lg);
}
/* ==========================================================================
6. NAVIGATION - PREMIUM ANIMATED
========================================================================== */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
isolation: isolate;
}
/* Nav Background with Premium Glassmorphism */
.nav__background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(32px) saturate(180%) brightness(1.1);
-webkit-backdrop-filter: blur(32px) saturate(180%) brightness(1.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 1px 0 0 rgba(255, 255, 255, 0.05) inset,
0 8px 32px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(255, 97, 0, 0.08);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
}
.nav.scrolled .nav__background {
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(40px) saturate(200%) brightness(1.15);
-webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.15);
box-shadow:
0 1px 0 0 rgba(255, 255, 255, 0.08) inset,
0 12px 48px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(255, 97, 0, 0.15);
border-bottom-color: rgba(255, 97, 0, 0.25);
}
/* Nav Glow Effect */
.nav__glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 800px;
height: 150px;
background: radial-gradient(ellipse at center,
rgba(255, 97, 0, 0.08) 0%,
transparent 70%);
opacity: 0;
transition: opacity 0.6s ease;
pointer-events: none;
}
.nav.scrolled .nav__glow {
opacity: 1;
}
/* Liquid Canvas Background */
.nav__liquid-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.4;
pointer-events: none;
mix-blend-mode: overlay;
}
/* Nav Container */
.nav__container {
display: flex;
align-items: center;
justify-content: space-between;
height: 80px;
position: relative;
z-index: 2;
}
/* Logo with Ripple Effect */
.nav__logo {
position: relative;
z-index: 10;
}
.nav__logo-wrapper {
position: relative;
display: inline-block;
padding: var(--space-2);
}
.nav__logo-img {
height: 40px;
width: auto;
display: block;
transition: all 0.3s var(--ease-smooth);
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
}
.nav__logo:hover .nav__logo-img {
transform: scale(1.05) translateY(-2px);
filter: drop-shadow(0 4px 12px rgba(255, 97, 0, 0.2));
}
.nav__logo-ripple {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 97, 0, 0.2) 0%, transparent 70%);
opacity: 0;
transition: all 0.6s var(--ease-smooth);
pointer-events: none;
}
.nav__logo:hover .nav__logo-ripple {
width: 100px;
height: 100px;
opacity: 1;
}
/* Hamburger Toggle - Premium */
.nav__toggle {
display: none;
position: relative;
width: 48px;
height: 48px;
padding: 12px;
border-radius: 8px;
background: transparent;
transition: all 0.3s var(--ease-smooth);
z-index: 10;
}
.nav__toggle:hover {
background: rgba(255, 97, 0, 0.05);
}
.nav__toggle-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 8px;
background: rgba(255, 97, 0, 0.1);
opacity: 0;
transform: scale(0.8);
transition: all 0.3s var(--ease-elastic);
}
.nav__toggle.active .nav__toggle-bg {
opacity: 1;
transform: scale(1);
}
.nav__toggle-line {
display: block;
width: 24px;
height: 2px;
background: var(--neutral-900);
border-radius: 2px;
margin: 5px 0;
transition: all 0.4s var(--ease-smooth);
transform-origin: center;
}
.nav__toggle.active .nav__toggle-line--1 {
transform: translateY(7px) rotate(45deg);
}
.nav__toggle.active .nav__toggle-line--2 {
opacity: 0;
transform: scaleX(0);
}
.nav__toggle.active .nav__toggle-line--3 {
transform: translateY(-7px) rotate(-45deg);
}
/* Nav Menu */
.nav__menu {
display: flex;
align-items: center;
gap: clamp(var(--space-4), 3vw, var(--space-7));
}
.nav__item {
opacity: 0;
transform: translateY(-10px);
animation: navItemFadeIn 0.5s var(--ease-smooth) forwards;
}
.nav__item[data-index="0"] {
animation-delay: 0.1s;
}
.nav__item[data-index="1"] {
animation-delay: 0.15s;
}
.nav__item[data-index="2"] {
animation-delay: 0.2s;
}
.nav__item[data-index="3"] {
animation-delay: 0.25s;
}
.nav__item[data-index="4"] {
animation-delay: 0.3s;
}
@keyframes navItemFadeIn {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Nav Links with Premium Glass Effect */
.nav__link {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: rgba(255, 255, 255, 0.75);
padding: var(--space-3) var(--space-4);
border-radius: 8px;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
overflow: visible;
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
}
.nav__dropdown-arrow {
margin-left: var(--space-1);
transition: transform 0.3s var(--ease-smooth);
}
.nav__item--dropdown:hover .nav__dropdown-arrow {
transform: rotate(180deg);
}
.nav__link-text {
position: relative;
z-index: 2;
}
.nav__link-ripple {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--color-vivid-orange) 50%,
transparent 100%);
transition: width 0.4s var(--ease-smooth);
z-index: 1;
}
.nav__link::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 97, 0, 0.12) 100%);
border-radius: 8px;
opacity: 0;
transition: opacity 0.35s ease;
z-index: 1;
box-shadow: 0 4px 16px rgba(255, 97, 0, 0.15);
}
.nav__link:hover {
color: var(--color-white);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transform: translateY(-1px);
}
.nav__link:hover::before {
opacity: 1;
}
.nav__link.active {
color: var(--color-vivid-orange);
}
.nav__link:hover .nav__link-ripple {
width: 100%;
}
/* CTA Link - Premium Glass Button */
.nav__link--cta {
background: linear-gradient(135deg, var(--color-vivid-orange) 0%, var(--orange-700) 100%);
color: var(--color-white);
padding: var(--space-3) var(--space-6);
border-radius: 10px;
box-shadow:
0 1px 0 0 rgba(255, 255, 255, 0.2) inset,
0 6px 20px rgba(255, 97, 0, 0.3);
gap: var(--space-2);
border: 1px solid rgba(255, 255, 255, 0.15);
position: relative;
overflow: hidden;
}
.nav__link--cta::before {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.15) 0%,
rgba(255, 255, 255, 0.05) 50%,
transparent 100%);
opacity: 1;
}
.nav__link--cta::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg,
transparent 30%,
rgba(255, 255, 255, 0.15) 50%,
transparent 70%);
transform: translateX(-100%) translateY(-100%) rotate(45deg);
transition: transform 0.6s ease;
}
.nav__link--cta:hover {
color: var(--color-white);
transform: translateY(-3px);
box-shadow:
0 1px 0 0 rgba(255, 255, 255, 0.25) inset,
0 12px 32px rgba(255, 97, 0, 0.45);
border-color: rgba(255, 255, 255, 0.25);
}
.nav__link--cta:hover::after {
transform: translateX(100%) translateY(100%) rotate(45deg);
}
.nav__link--cta .nav__link-ripple {
display: none;
}
.nav__link-arrow {
transition: transform 0.3s var(--ease-smooth);
}
.nav__link--cta:hover .nav__link-arrow {
transform: translateX(3px);
}
/* Dropdown Menu - Premium Glass */
.nav__dropdown {
position: absolute;
top: calc(100% + 16px);
left: 0;
min-width: 260px;
background: rgba(10, 10, 10, 0.85);
backdrop-filter: blur(40px) saturate(180%) brightness(1.1);
-webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.1);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: var(--space-4);
opacity: 0;
visibility: hidden;
transform: translateY(-12px) scale(0.96);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 1px 0 0 rgba(255, 255, 255, 0.08) inset,
0 20px 60px rgba(0, 0, 0, 0.7),
0 0 0 1px rgba(255, 97, 0, 0.12);
z-index: 1000;
}
.nav__item--dropdown:hover .nav__dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.nav__dropdown li {
list-style: none;
}
.nav__dropdown-link {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-4);
color: rgba(255, 255, 255, 0.75);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
border-radius: 10px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
.nav__dropdown-link::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.06) 0%,
rgba(255, 97, 0, 0.18) 100%);
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 10px;
}
.nav__dropdown-link:hover {
color: var(--color-white);
transform: translateX(6px);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.nav__dropdown-link:hover::before {
opacity: 1;
}
.nav__badge {
display: inline-block;
padding: 3px 10px;
background: linear-gradient(135deg, var(--color-vivid-orange) 0%, var(--orange-600) 100%);
color: var(--color-white);
font-size: 10px;
font-weight: var(--font-weight-bold);
text-transform: uppercase;
border-radius: 14px;
letter-spacing: 0.06em;
box-shadow:
0 1px 0 0 rgba(255, 255, 255, 0.2) inset,
0 2px 8px rgba(255, 97, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.15);
position: relative;
z-index: 2;
animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
0%,
100% {
box-shadow:
0 1px 0 0 rgba(255, 255, 255, 0.2) inset,
0 2px 8px rgba(255, 97, 0, 0.4);
}
50% {
box-shadow:
0 1px 0 0 rgba(255, 255, 255, 0.3) inset,
0 4px 16px rgba(255, 97, 0, 0.6);
}
}
/* Nav Progress Bar */
.nav__progress {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: rgba(0, 0, 0, 0.03);
overflow: hidden;
z-index: 2;
}
.nav__progress-bar {
height: 100%;
width: 0;
background: linear-gradient(90deg,
var(--color-vivid-orange) 0%,
var(--orange-700) 50%,
var(--color-vivid-orange) 100%);
background-size: 200% 100%;
animation: progressShimmer 2s ease-in-out infinite;
box-shadow: 0 0 12px rgba(255, 97, 0, 0.5);
transition: width 0.2s ease-out;
}
@keyframes progressShimmer {
0%,
100% {
background-position: 0% 0%;
}
50% {
background-position: 100% 0%;
}
}
/* Nav Flow Line */
.nav__flow-line {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
overflow: hidden;
opacity: 0;
transition: opacity 0.4s ease;
z-index: 3;
}
.nav.scrolled .nav__flow-line {
opacity: 1;
}
.nav__flow-svg {
width: 100%;
height: 100%;
animation: flowLineWave 4s ease-in-out infinite;
}
@keyframes flowLineWave {
0%,
100% {
transform: translateX(0) scaleY(1);
}
50% {
transform: translateX(10px) scaleY(1.2);
}
}
/* ==========================================================================
7. HERO SECTION - PREMIUM LAYOUT
========================================================================== */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: calc(80px + var(--space-10)) 0 var(--space-10);
background: linear-gradient(135deg, #000000 0%, #0D0D0D 50%, #000000 100%);
overflow: hidden;
}
.hero::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 200px;
background: linear-gradient(0deg, rgba(255, 97, 0, 0.08) 0%, transparent 100%);
pointer-events: none;
opacity: 0;
animation: fadeInSlow 2s ease 1.5s forwards;
}
@keyframes fadeInSlow {
to {
opacity: 1;
}
}
.hero__background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.hero__flow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 30% 40%, rgba(255, 97, 0, 0.25) 0%, transparent 60%);
animation: flowPulse 12s ease-in-out infinite;
}
.hero__grid-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(255, 97, 0, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 97, 0, 0.03) 1px, transparent 1px);
background-size: 40px 40px;
opacity: 0.4;
}
@keyframes flowPulse {
0%,
100% {
opacity: 0.4;
transform: scale(1) rotate(0deg);
}
50% {
opacity: 0.7;
transform: scale(1.1) rotate(2deg);
}
}
.hero__container {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--space-9);
align-items: center;
}
.hero__content {
text-align: left;
max-width: 700px;
}
/* Hero Label */
.hero__label {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: rgba(255, 97, 0, 0.08);
border: 1px solid rgba(255, 97, 0, 0.2);
border-radius: 50px;
margin-bottom: var(--space-5);
opacity: 0;
animation: fadeInUp 0.6s ease forwards;
}
.hero__label-text {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-vivid-orange);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Kinetic Typography */
.hero__title--kinetic {
margin-bottom: var(--space-3);
}
.hero__title-line {
display: flex;
align-items: center;
gap: var(--space-4);
font-size: clamp(var(--font-size-4xl), 9vw, 110px);
font-weight: var(--font-weight-light);
line-height: 1;
color: var(--color-white);
}
.hero__title-static {
opacity: 0;
animation: fadeInUp 0.6s ease 0.1s forwards;
flex-shrink: 0;
line-height: 1;
}
.hero__title-cycler {
position: relative;
display: inline-block;
height: 1em;
overflow: visible;
min-width: 320px;
vertical-align: middle;
line-height: 1;
}
.hero__word {
position: absolute;
top: 50%;
left: 0;
transform: translateY(50%);
width: auto;
opacity: 0;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
background: linear-gradient(120deg,
var(--color-vivid-orange) 0%,
#FFAF3F 30%,
#FF8533 50%,
#FFAF3F 70%,
var(--color-vivid-orange) 100%);
background-size: 300% 300%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: liquidFlow 6s ease-in-out infinite;
text-shadow: 0 0 40px rgba(255, 97, 0, 0.5);
font-weight: var(--font-weight-medium);
display: inline-block;
line-height: 1;
}
@keyframes liquidFlow {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.hero__word.active {
opacity: 1;
transform: translateY(-50%);
}
.hero__word.exit {
opacity: 0;
transform: translateY(-150%);
}
/* Accent line under title */
.hero__accent-line {
width: 80px;
height: 4px;
background: var(--gradient-main);
border-radius: 4px;
margin-bottom: var(--space-7);
opacity: 0;
animation: fadeInUp 0.8s ease 0.3s forwards, flowLineGrow 3s ease 0.8s infinite;
}
@keyframes flowLineGrow {
0%,
100% {
transform: scaleX(1);
}
50% {
transform: scaleX(1.3);
}
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Manifesto wrapper */
.hero__manifesto-wrapper {
margin-bottom: var(--space-8);
opacity: 0;
animation: fadeInUp 0.8s ease 0.5s forwards;
}
.hero__manifesto {
font-size: clamp(var(--font-size-xl), 2.5vw, 32px);
font-weight: var(--font-weight-light);
line-height: var(--line-height-tight);
color: var(--color-white);
margin-bottom: var(--space-4);
position: relative;
padding-left: var(--space-5);
}
.hero__manifesto::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 3px;
height: 100%;
background: linear-gradient(180deg,
transparent 0%,
var(--color-vivid-orange) 20%,
var(--color-vivid-orange) 80%,
transparent 100%);
opacity: 0;
animation: fadeIn 1s ease 1.5s forwards, flowLineVertical 3s ease 2s infinite;
}
@keyframes flowLineVertical {
0%,
100% {
transform: scaleY(1);
opacity: 0.7;
}
50% {
transform: scaleY(1.15);
opacity: 1;
box-shadow: 0 0 12px rgba(255, 97, 0, 0.6);
}
}
.hero__manifesto-highlight {
display: block;
background: linear-gradient(90deg,
var(--color-white) 0%,
var(--color-vivid-orange) 25%,
#FFAF3F 50%,
var(--color-vivid-orange) 75%,
var(--color-white) 100%);
background-size: 400% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: flowingManifesto 8s ease-in-out infinite;
font-weight: var(--font-weight-medium);
}
@keyframes flowingManifesto {
0%,
100% {
background-position: 0% 50%;
}
25% {
background-position: 50% 100%;
}
50% {
background-position: 100% 50%;
}
75% {
background-position: 50% 0%;
}
}
.hero__manifesto-sub {
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
color: rgba(255, 255, 255, 0.6);
font-weight: var(--font-weight-regular);
max-width: 520px;
}
/* CTA Wrapper */
.hero__cta-wrapper {
opacity: 0;
animation: fadeInUp 0.8s ease 0.7s forwards;
}
.hero__cta {
display: flex;
gap: var(--space-4);
margin-bottom: var(--space-6);
flex-wrap: wrap;
}
.btn--hero {
padding: var(--space-4) var(--space-7);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-medium);
border-radius: 8px;
min-width: 200px;
justify-content: center;
}
/* Trust Indicators */
.hero__trust-indicators {
display: flex;
gap: var(--space-7);
padding-top: var(--space-6);
border-top: 1px solid var(--neutral-200);
}
.hero__trust-item {
display: flex;
flex-direction: column;
gap: var(--space-2);
position: relative;
padding: var(--space-4);
border-radius: 12px;
transition: all 0.4s var(--ease-smooth);
}
.hero__trust-item::before {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 97, 0, 0.05);
border: 1px solid rgba(255, 97, 0, 0.1);
border-radius: 12px;
opacity: 0;
transition: all 0.4s var(--ease-smooth);
}
.hero__trust-item:hover::before {
opacity: 1;
border-color: rgba(255, 97, 0, 0.3);
box-shadow: 0 8px 24px rgba(255, 97, 0, 0.2);
}
.hero__trust-item:hover {
transform: translateY(-4px);
}
.hero__trust-number {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-medium);
color: var(--color-vivid-orange);
line-height: 1;
text-shadow: 0 0 20px rgba(255, 97, 0, 0.5);
position: relative;
z-index: 1;
transition: all 0.3s var(--ease-smooth);
}
.hero__trust-item:hover .hero__trust-number {
transform: scale(1.1);
text-shadow: 0 0 30px rgba(255, 97, 0, 0.8);
}
.hero__trust-label {
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: var(--font-weight-medium);
}
.hero__trust-indicators {
border-top-color: rgba(255, 97, 0, 0.2);
}
/* Hero Visual Side */
.hero__visual {
position: relative;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
}
.hero__visual-card {
position: absolute;
border-radius: var(--border-radius-lg);
background: var(--color-white);
border: 1px solid rgba(255, 97, 0, 0.12);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: all var(--transition-flow);
cursor: pointer;
}
.hero__visual-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg,
transparent 0%,
rgba(255, 97, 0, 0.15) 50%,
transparent 100%);
background-size: 200% 200%;
background-position: -100% 0;
opacity: 0;
transition: all 0.8s var(--ease-smooth);
}
.hero__visual-card:hover::after {
opacity: 1;
background-position: 100% 0;
}
.hero__visual-card:hover {
border-color: rgba(255, 97, 0, 0.3);
box-shadow: 0 30px 80px rgba(255, 97, 0, 0.25),
0 0 60px rgba(255, 97, 0, 0.15),
inset 0 0 40px rgba(255, 97, 0, 0.05);
transform: translateY(-8px) scale(1.02);
}
.hero__visual-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.hero__visual-image svg {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero__visual-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-4);
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(8px);
opacity: 0;
transition: opacity var(--transition-base);
z-index: 2;
}
.hero__visual-card:hover .hero__visual-overlay {
opacity: 1;
}
.hero__visual-icon {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
opacity: 0;
transform: scale(0.8);
transition: all var(--transition-base);
}
.hero__visual-card:hover .hero__visual-icon {
opacity: 1;
transform: scale(1);
transition-delay: 0.1s;
}
.hero__visual-label {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-medium);
color: var(--neutral-900);
opacity: 0;
transform: translateY(10px);
transition: all var(--transition-base);
}
.hero__visual-card:hover .hero__visual-label {
opacity: 1;
transform: translateY(0);
transition-delay: 0.2s;
}
/* Hero Visual Main Image */
.hero__visual-main {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.hero__visual-frame {
position: relative;
width: 500px;
height: 500px;
animation: floatMain 8s ease-in-out infinite;
}
@keyframes floatMain {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(2deg);
}
}
.hero__visual-image-wrapper {
position: relative;
width: 100%;
height: 100%;
border-radius: 24px;
overflow: hidden;
background: rgba(255, 97, 0, 0.05);
border: 2px solid rgba(255, 97, 0, 0.2);
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6),
0 0 80px rgba(255, 97, 0, 0.2),
inset 0 0 100px rgba(255, 97, 0, 0.08);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.hero__visual-main-img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.9;
transition: all 0.6s var(--ease-smooth);
}
.hero__visual-frame:hover .hero__visual-main-img {
opacity: 1;
transform: scale(1.05);
}
.hero__visual-pattern {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 97, 0, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 97, 0, 0.05) 1px, transparent 1px);
background-size: 30px 30px;
opacity: 0.3;
pointer-events: none;
}
.hero__visual-badge {
position: absolute;
top: 24px;
right: 24px;
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-5);
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 97, 0, 0.3);
border-radius: 100px;
color: var(--color-white);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
z-index: 10;
animation: badgeFloat 3s ease-in-out infinite;
}
@keyframes badgeFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
.hero__visual-badge-icon {
width: 20px;
height: 20px;
object-fit: contain;
filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(345deg);
}
/* Floating Metrics */
.hero__visual-metrics {
position: absolute;
inset: 0;
pointer-events: none;
}
.hero__metric-card {
position: absolute;
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 97, 0, 0.3);
border-radius: 16px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5),
0 0 40px rgba(255, 97, 0, 0.2);
pointer-events: auto;
cursor: pointer;
transition: all 0.4s var(--ease-smooth);
}
.hero__metric-card:hover {
transform: translateY(-8px) scale(1.05);
border-color: rgba(255, 97, 0, 0.6);
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6),
0 0 60px rgba(255, 97, 0, 0.4);
}
.hero__metric-card--1 {
top: 10%;
right: -10%;
animation: floatMetric1 6s ease-in-out infinite;
}
.hero__metric-card--2 {
bottom: 15%;
left: -15%;
animation: floatMetric2 7s ease-in-out infinite 0.5s;
}
.hero__metric-card--3 {
top: 40%;
right: -12%;
animation: floatMetric3 8s ease-in-out infinite 1s;
}
@keyframes floatMetric1 {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}
@keyframes floatMetric2 {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
@keyframes floatMetric3 {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-18px);
}
}
.hero__metric-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 97, 0, 0.15);
border-radius: 12px;
}
.hero__metric-icon-img {
width: 24px;
height: 24px;
object-fit: contain;
filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(345deg);
}
.hero__metric-number {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
background: linear-gradient(135deg,
var(--color-vivid-orange) 0%,
#FFAF3F 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1;
}
.hero__metric-content {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.hero__metric-label {
font-size: var(--font-size-xs);
color: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: var(--font-weight-medium);
}
@keyframes floatCard1 {
0%,
100% {
transform: translate(-50%, -50%) rotate(-3deg) translateY(0);
}
50% {
transform: translate(-50%, -50%) rotate(-1deg) translateY(-20px);
}
}
@keyframes floatCard2 {
0%,
100% {
transform: translate(-50%, -50%) rotate(5deg) translateY(0);
}
50% {
transform: translate(-50%, -50%) rotate(3deg) translateY(-15px);
}
}
.hero__visual-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120%;
height: 120%;
background: radial-gradient(circle, rgba(255, 97, 0, 0.15) 0%, transparent 70%);
animation: glowPulse 4s ease-in-out infinite;
border-radius: inherit;
}
/* Scroll Indicator */
.hero__scroll-indicator {
position: absolute;
bottom: var(--space-7);
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
opacity: 0;
animation: fadeInUp 0.8s ease 1.5s forwards, floatUpDown 2s ease-in-out 2.5s infinite;
z-index: 10;
cursor: pointer;
transition: all 0.3s var(--ease-smooth);
}
.hero__scroll-indicator:hover {
transform: translateX(-50%) translateY(-8px);
opacity: 1;
}
@keyframes floatUpDown {
0%,
100% {
transform: translateX(-50%) translateY(0);
}
50% {
transform: translateX(-50%) translateY(-10px);
}
}
.hero__scroll-text {
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: var(--font-weight-medium);
}
.hero__scroll-arrow {
font-size: var(--font-size-xl);
color: var(--color-vivid-orange);
animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(10px);
}
}
.hero__waves {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 200px;
overflow: hidden;
z-index: 1;
}
.wave {
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
fill: #000000;
}
.wave--1 {
opacity: 0.5;
animation: waveFlow1 12s ease-in-out infinite;
}
.wave--2 {
opacity: 0.3;
animation: waveFlow2 15s ease-in-out infinite reverse;
}
@keyframes waveFlow1 {
0%,
100% {
transform: translateX(0) translateY(0);
}
50% {
transform: translateX(-25px) translateY(5px);
}
}
@keyframes waveFlow2 {
0%,
100% {
transform: translateX(0) translateY(0);
}
50% {
transform: translateX(30px) translateY(-5px);
}
}
/* ==========================================================================
7.5. SERVICES BELT (INFINITE MARQUEE) - Dark Theme
========================================================================== */
.services-belt {
padding: var(--space-9) 0;
background: #000000;
color: var(--color-white);
overflow: hidden;
position: relative;
}
.services-belt__background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
rgba(255, 97, 0, 0.03) 0%,
rgba(255, 97, 0, 0.08) 50%,
rgba(255, 97, 0, 0.03) 100%);
pointer-events: none;
}
.services-belt__glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 200px;
background: radial-gradient(ellipse, rgba(255, 97, 0, 0.15) 0%, transparent 70%);
filter: blur(60px);
opacity: 0.6;
animation: pulseGlow 4s ease-in-out infinite;
}
@keyframes pulseGlow {
0%,
100% {
opacity: 0.4;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 0.8;
transform: translate(-50%, -50%) scale(1.2);
}
}
.services-belt__track {
display: flex;
gap: 0;
animation: marqueeScroll 40s linear infinite;
will-change: transform;
}
.services-belt__content {
display: flex;
align-items: center;
gap: 0;
flex-shrink: 0;
}
.services-belt__item {
display: inline-flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-5) var(--space-7);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-medium);
white-space: nowrap;
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
position: relative;
transition: all 0.4s var(--ease-smooth);
border-radius: 12px;
margin: 0 var(--space-2);
}
.services-belt__item::before {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 97, 0, 0.05);
border: 1px solid rgba(255, 97, 0, 0.1);
border-radius: 12px;
opacity: 0;
transition: all 0.4s var(--ease-smooth);
}
.services-belt__item:hover::before {
opacity: 1;
border-color: rgba(255, 97, 0, 0.4);
}
.services-belt__item:hover {
color: var(--color-white);
transform: translateY(-4px);
z-index: 2;
}
.services-belt__icon-img {
width: 24px;
height: 24px;
object-fit: contain;
filter: invert(1) brightness(0.8);
transition: all 0.3s var(--ease-smooth);
}
.services-belt__item:hover .services-belt__icon-img {
filter: invert(0.5) sepia(1) saturate(5) hue-rotate(5deg) brightness(1.1);
transform: scale(1.15) rotate(-8deg);
}
.services-belt__separator {
color: var(--color-vivid-orange);
font-size: var(--font-size-base);
opacity: 0.3;
margin: 0 var(--space-5);
font-weight: var(--font-weight-light);
}
.services-belt__badge {
display: inline-block;
padding: 3px 10px;
background: var(--color-vivid-orange);
color: var(--color-white);
font-size: 11px;
font-weight: var(--font-weight-bold);
text-transform: uppercase;
border-radius: 12px;
letter-spacing: 0.05em;
margin-left: var(--space-2);
animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 16px rgba(255, 97, 0, 0.6);
}
}
.services-belt__item--new {
position: relative;
}
.services-belt__item--new::after {
content: '';
position: absolute;
top: -4px;
right: -4px;
width: 8px;
height: 8px;
background: var(--color-vivid-orange);
border-radius: 50%;
box-shadow: 0 0 12px rgba(255, 97, 0, 0.8);
animation: blink 2s ease-in-out infinite;
}
@keyframes blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.3;
}
}
@keyframes marqueeScroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Pause on hover for accessibility */
.services-belt:hover .services-belt__track {
animation-play-state: paused;
}
/* ==========================================================================
7.6. CASE TILES
========================================================================== */
.cases {
padding: var(--space-10) 0;
background: linear-gradient(180deg, #0A0A0A 0%, #000000 100%);
position: relative;
}
.cases__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-6);
margin-top: var(--space-8);
}
.case-tile {
position: relative;
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 97, 0, 0.15);
border-radius: var(--border-radius-lg);
overflow: hidden;
transition: all var(--ease-smooth);
cursor: pointer;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.case-tile::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg,
transparent 0%,
rgba(255, 97, 0, 0.1) 50%,
transparent 100%);
opacity: 0;
transition: opacity 0.6s var(--ease-smooth);
pointer-events: none;
}
.case-tile:hover::after {
opacity: 1;
}
.case-tile:hover {
background: rgba(255, 255, 255, 0.06);
transform: translateY(-12px) scale(1.02);
box-shadow: 0 24px 64px rgba(255, 97, 0, 0.5),
0 0 60px rgba(255, 97, 0, 0.3),
inset 0 0 40px rgba(255, 97, 0, 0.05);
border-color: rgba(255, 97, 0, 0.6);
}
.case-tile__media {
position: relative;
width: 100%;
height: 300px;
background: rgba(255, 97, 0, 0.05);
overflow: hidden;
}
.case-tile__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: all var(--transition-flow);
}
.case-tile:hover .case-tile__image {
transform: scale(1.05);
opacity: 0.8;
}
.case-tile__video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center,
rgba(255, 97, 0, 0.1) 0%,
rgba(255, 97, 0, 0.05) 50%,
transparent 100%);
opacity: 0;
transition: opacity var(--transition-base);
pointer-events: none;
}
.case-tile:hover .case-tile__video-overlay {
opacity: 1;
}
.case-tile__info {
padding: var(--space-6);
}
.case-tile__category {
display: inline-block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-vivid-orange);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-3);
}
.case-tile__title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-medium);
margin-bottom: var(--space-3);
color: var(--color-white);
transition: all 0.4s var(--ease-smooth);
}
.case-tile:hover .case-tile__title {
background: linear-gradient(90deg,
var(--color-white) 0%,
var(--color-vivid-orange) 50%,
var(--color-white) 100%);
background-size: 200% auto;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: titleShine 2s ease-in-out infinite;
}
@keyframes titleShine {
0%,
100% {
background-position: 0% center;
}
50% {
background-position: 200% center;
}
}
.case-tile__desc {
font-size: var(--font-size-base);
color: rgba(255, 255, 255, 0.6);
line-height: var(--line-height-relaxed);
}
/* ==========================================================================
7.7. CONVICTION BAND
========================================================================== */
.conviction-band {
padding: var(--space-10) 0;
background: linear-gradient(135deg, var(--neutral-900) 0%, var(--neutral-800) 100%);
color: var(--color-white);
text-align: center;
position: relative;
overflow: hidden;
}
.conviction-band::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 30% 50%,
rgba(255, 97, 0, 0.1) 0%,
transparent 60%);
pointer-events: none;
}
.conviction-band__content {
position: relative;
z-index: 2;
}
.conviction-band__title {
font-size: clamp(var(--font-size-2xl), 5vw, var(--font-size-4xl));
font-weight: var(--font-weight-medium);
line-height: var(--line-height-tight);
margin-bottom: var(--space-8);
max-width: 900px;
margin-left: auto;
margin-right: auto;
background: linear-gradient(90deg,
rgba(255, 255, 255, 0.9) 0%,
var(--color-vivid-orange) 20%,
#FFAF3F 40%,
var(--color-vivid-orange) 60%,
rgba(255, 255, 255, 0.9) 80%,
var(--color-vivid-orange) 100%);
background-size: 300% auto;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: convictionFlow 10s linear infinite;
}
@keyframes convictionFlow {
0% {
background-position: 0% center;
}
100% {
background-position: 300% center;
}
}
.conviction-band__proof {
display: flex;
justify-content: center;
gap: var(--space-9);
flex-wrap: wrap;
margin-top: var(--space-8);
}
.conviction-band__stat {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
position: relative;
padding: var(--space-5);
border-radius: 16px;
transition: all 0.4s var(--ease-smooth);
}
.conviction-band__stat::before {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 97, 0, 0.05);
border: 1px solid rgba(255, 97, 0, 0.15);
border-radius: 16px;
opacity: 0;
transition: all 0.4s var(--ease-smooth);
}
.conviction-band__stat:hover::before {
opacity: 1;
border-color: rgba(255, 97, 0, 0.4);
box-shadow: 0 16px 40px rgba(255, 97, 0, 0.3),
inset 0 0 40px rgba(255, 97, 0, 0.1);
}
.conviction-band__stat:hover {
transform: translateY(-8px) scale(1.05);
}
.conviction-band__number {
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
background: linear-gradient(135deg,
var(--color-vivid-orange) 0%,
#FFAF3F 50%,
var(--color-vivid-orange) 100%);
background-size: 200% 200%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: statGlow 4s ease-in-out infinite;
line-height: 1;
position: relative;
z-index: 1;
transition: all 0.3s var(--ease-smooth);
}
@keyframes statGlow {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.conviction-band__stat:hover .conviction-band__number {
transform: scale(1.2);
filter: drop-shadow(0 0 20px rgba(255, 97, 0, 0.8));
}
.conviction-band__label {
font-size: var(--font-size-base);
font-weight: var(--font-weight-regular);
color: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ==========================================================================
7.8. STICKY CONTACT KICKER
========================================================================== */
.contact-kicker {
position: fixed;
bottom: var(--space-6);
right: var(--space-6);
z-index: 1000;
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) var(--space-6);
background: var(--color-vivid-orange);
color: var(--color-white);
border: none;
border-radius: 50px;
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
font-family: var(--font-family);
cursor: pointer;
box-shadow: var(--shadow-xl);
transition: all var(--transition-base);
opacity: 0;
transform: translateY(20px);
pointer-events: none;
}
.contact-kicker.visible {
opacity: 1;
transform: translateY(0);
pointer-events: all;
}
.contact-kicker:hover {
background: var(--orange-700);
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(255, 97, 0, 0.4);
}
.contact-kicker__text {
font-size: var(--font-size-lg);
}
.contact-kicker__arrow {
transition: transform var(--transition-base);
}
.contact-kicker:hover .contact-kicker__arrow {
transform: translateX(4px);
}
/* Pulse animation to draw attention */
.contact-kicker::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
background: var(--color-vivid-orange);
border-radius: 50px;
animation: kickerPulse 2s ease-in-out infinite;
z-index: -1;
}
@keyframes kickerPulse {
0%,
100% {
opacity: 0.5;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 0;
transform: translate(-50%, -50%) scale(1.3);
}
}
/* ==========================================================================
8. DUAL INTRO SECTION
========================================================================== */
.dual-intro {
padding: var(--space-9) 0;
text-align: center;
background: #000000;
position: relative;
}
.dual-intro__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-7);
margin-top: var(--space-8);
}
.dual-intro__card {
padding: var(--space-7);
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 97, 0, 0.15);
border-radius: var(--border-radius-lg);
transition: all var(--ease-smooth);
position: relative;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.dual-intro__card::after {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 97, 0, 0.1) 0%, transparent 50%);
opacity: 0;
transition: all 0.8s var(--ease-smooth);
pointer-events: none;
}
.dual-intro__card:hover::after {
opacity: 1;
top: -30%;
right: -30%;
}
.dual-intro__card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--gradient-main);
transform: scaleX(0);
transition: transform var(--transition-flow);
}
.dual-intro__card:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 97, 0, 0.5);
transform: translateY(-12px) scale(1.02);
box-shadow: 0 20px 60px rgba(255, 97, 0, 0.4);
}
.dual-intro__card:hover::before {
transform: scaleX(1);
}
.dual-intro__icon {
width: var(--icon-md);
height: var(--icon-md);
margin: 0 auto var(--space-5);
color: var(--color-vivid-orange);
}
.dual-intro__title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-medium);
margin-bottom: var(--space-4);
background: linear-gradient(135deg,
var(--color-white) 0%,
rgba(255, 175, 63, 0.9) 50%,
var(--color-white) 100%);
background-size: 200% 200%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: diagonalShimmer 5s ease-in-out infinite;
}
@keyframes diagonalShimmer {
0%,
100% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
}
.dual-intro__text {
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: rgba(255, 255, 255, 0.7);
}
/* ==========================================================================
9. PROOF BAR SECTION
========================================================================== */
.proof-bar {
padding: var(--space-9) 0;
background: linear-gradient(180deg, #000000 0%, #0A0A0A 100%);
text-align: center;
position: relative;
overflow: hidden;
}
.proof-bar::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 70% 50%, rgba(255, 97, 0, 0.1) 0%, transparent 60%);
pointer-events: none;
}
.proof-bar__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-7);
margin: var(--space-8) 0;
}
.proof-bar__stat {
padding: var(--space-6);
position: relative;
border-radius: 12px;
transition: all 0.4s var(--ease-smooth);
}
.proof-bar__stat::before {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 97, 0, 0.03);
border: 1px solid rgba(255, 97, 0, 0.1);
border-radius: 12px;
opacity: 0;
transition: all 0.4s var(--ease-smooth);
}
.proof-bar__stat:hover::before {
opacity: 1;
border-color: rgba(255, 97, 0, 0.3);
box-shadow: 0 12px 32px rgba(255, 97, 0, 0.2);
}
.proof-bar__stat:hover {
transform: translateY(-6px);
}
.proof-bar__number {
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-medium);
color: var(--color-vivid-orange);
margin-bottom: var(--space-3);
line-height: 1;
position: relative;
z-index: 1;
transition: all 0.3s var(--ease-smooth);
}
.proof-bar__stat:hover .proof-bar__number {
transform: scale(1.15);
text-shadow: 0 0 30px rgba(255, 97, 0, 0.8);
}
.proof-bar__label {
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: rgba(255, 255, 255, 0.7);
}
.proof-bar__tagline {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-light);
color: rgba(255, 255, 255, 0.5);
font-style: italic;
margin-top: var(--space-7);
}
/* ==========================================================================
10. FEATURED PROJECT SECTION
========================================================================== */
.featured {
padding: var(--space-10) 0;
position: relative;
overflow: hidden;
}
.featured .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
align-items: center;
}
.featured__content {
text-align: left;
}
.featured__content .section__title {
text-align: left;
}
.featured__visual {
position: relative;
height: 500px;
}
.featured__card {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
background: var(--gradient-main);
border-radius: var(--border-radius-lg);
animation: floatCard 6s ease-in-out infinite;
}
@keyframes floatCard {
0%,
100% {
transform: translate(-50%, -50%) rotate(0deg);
}
50% {
transform: translate(-50%, -55%) rotate(5deg);
}
}
.featured__card-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 450px;
height: 450px;
background: radial-gradient(circle, rgba(255, 97, 0, 0.2) 0%, transparent 70%);
animation: glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse {
0%,
100% {
opacity: 0.5;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 1;
transform: translate(-50%, -50%) scale(1.1);
}
}
/* ==========================================================================
11. SERVICES SECTION
========================================================================== */
.services {
padding: var(--space-9) 0;
text-align: center;
background: #000000;
position: relative;
}
.services__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-6);
margin: var(--space-8) 0;
}
.service-card {
padding: var(--space-8);
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 97, 0, 0.12);
border-radius: var(--border-radius-lg);
transition: all 0.5s var(--ease-smooth);
position: relative;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.service-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg at 50% 50%,
transparent 0deg,
rgba(255, 97, 0, 0.15) 60deg,
rgba(255, 175, 63, 0.1) 120deg,
transparent 180deg,
transparent 360deg);
animation: rotateConic 8s linear infinite;
opacity: 0;
transition: opacity 0.5s var(--ease-smooth);
}
.service-card:hover::before {
opacity: 1;
}
@keyframes rotateConic {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.service-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg,
transparent 0%,
rgba(255, 97, 0, 0.08) 50%,
transparent 100%);
opacity: 0;
transition: height var(--transition-flow);
}
.service-card:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 97, 0, 0.5);
transform: translateY(-12px) scale(1.03);
box-shadow: 0 24px 48px rgba(255, 97, 0, 0.5),
0 0 60px rgba(255, 97, 0, 0.3),
inset 0 0 60px rgba(255, 97, 0, 0.1);
}
.service-card:hover::after {
opacity: 1;
}
.service-card__icon {
width: 56px;
height: 56px;
margin: 0 auto var(--space-5);
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.service-card__icon-img {
width: 100%;
height: 100%;
object-fit: contain;
filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(345deg) brightness(1.05);
transition: all 0.5s var(--ease-smooth);
}
.service-card:hover .service-card__icon-img {
transform: scale(1.2) rotate(-10deg) translateY(-8px);
filter: brightness(0) invert(1) sepia(1) saturate(10) hue-rotate(345deg) brightness(1.2) drop-shadow(0 0 20px rgba(255, 97, 0, 0.9));
animation: iconPulse 2s ease-in-out infinite;
}
@keyframes iconPulse {
0%,
100% {
transform: scale(1.2) rotate(-10deg) translateY(-8px);
}
50% {
transform: scale(1.25) rotate(-8deg) translateY(-12px);
}
}
.service-card__title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-medium);
margin-bottom: var(--space-4);
position: relative;
z-index: 1;
color: var(--color-white);
transition: all 0.4s var(--ease-smooth);
}
.service-card:hover .service-card__title {
background: linear-gradient(90deg,
var(--color-white) 0%,
var(--color-vivid-orange) 40%,
#FFAF3F 50%,
var(--color-vivid-orange) 60%,
var(--color-white) 100%);
background-size: 200% auto;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: serviceShimmer 2.5s ease-in-out infinite;
}
@keyframes serviceShimmer {
0%,
100% {
background-position: 0% center;
}
50% {
background-position: 200% center;
}
}
.service-card__text {
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: rgba(255, 255, 255, 0.6);
position: relative;
z-index: 1;
}
.services__cta {
margin-top: var(--space-8);
}
/* ==========================================================================
12. PHILOSOPHY SECTION
========================================================================== */
.philosophy {
padding: var(--space-10) 0;
background: linear-gradient(135deg, #000000 0%, #0D0D0D 50%, #000000 100%);
color: var(--color-white);
position: relative;
overflow: hidden;
border-top: 1px solid rgba(255, 97, 0, 0.2);
}
.philosophy::before {
content: '';
position: absolute;
top: 50%;
left: 30%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(255, 97, 0, 0.15) 0%, transparent 70%);
transform: translate(-50%, -50%);
filter: blur(80px);
animation: philosophyGlow 10s ease-in-out infinite;
pointer-events: none;
}
@keyframes philosophyGlow {
0%,
100% {
opacity: 0.3;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 0.6;
transform: translate(-50%, -50%) scale(1.3);
}
}
.philosophy .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
align-items: center;
position: relative;
z-index: 2;
}
.philosophy .section__title {
color: var(--color-white);
text-align: left;
}
.philosophy__text p {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-light);
line-height: var(--line-height-relaxed);
color: rgba(255, 255, 255, 0.8);
margin-bottom: var(--space-5);
}
.philosophy__text p:last-child {
background: linear-gradient(90deg,
var(--color-vivid-orange) 0%,
#FFAF3F 30%,
var(--color-vivid-orange) 60%,
#FF8533 100%);
background-size: 200% auto;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: philosophyHighlight 4s ease-in-out infinite;
font-weight: var(--font-weight-medium);
}
@keyframes philosophyHighlight {
0%,
100% {
background-position: 0% center;
}
50% {
background-position: 200% center;
}
}
.philosophy__visual {
position: relative;
height: 400px;
}
.philosophy__stream {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 97, 0, 0.2) 0%, transparent 70%);
animation: streamFlow 8s ease-in-out infinite;
}
@keyframes streamFlow {
0%,
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.5;
}
50% {
transform: translate(-50%, -50%) scale(1.2);
opacity: 0.8;
}
}
.philosophy__stream::before,
.philosophy__stream::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 2px solid rgba(255, 97, 0, 0.3);
}
.philosophy__stream::before {
width: 200px;
height: 200px;
animation: ripple 4s ease-out infinite;
}
.philosophy__stream::after {
width: 250px;
height: 250px;
animation: ripple 4s ease-out 2s infinite;
}
@keyframes ripple {
0% {
opacity: 1;
transform: translate(-50%, -50%) scale(0.8);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(1.5);
}
}
/* ==========================================================================
13. FINAL CTA SECTION
========================================================================== */
.final-cta {
padding: var(--space-10) 0;
text-align: center;
background: linear-gradient(180deg, #000000 0%, #0D0D0D 50%, #000000 100%);
position: relative;
}
.final-cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, rgba(255, 97, 0, 0.15) 0%, transparent 70%);
pointer-events: none;
}
.final-cta__title {
font-size: clamp(var(--font-size-3xl), 6vw, var(--font-size-4xl));
font-weight: var(--font-weight-medium);
margin-bottom: var(--space-5);
background: linear-gradient(90deg,
rgba(255, 255, 255, 0.9) 0%,
var(--color-white) 20%,
var(--color-vivid-orange) 45%,
#FFAF3F 50%,
var(--color-vivid-orange) 55%,
var(--color-white) 80%,
rgba(255, 255, 255, 0.9) 100%);
background-size: 300% auto;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: ctaGlow 7s ease-in-out infinite;
position: relative;
z-index: 2;
}
@keyframes ctaGlow {
0%,
100% {
background-position: 0% center;
}
50% {
background-position: 100% center;
}
}
.final-cta__subtitle {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-light);
color: rgba(255, 255, 255, 0.6);
margin-bottom: var(--space-7);
position: relative;
z-index: 2;
}
.final-cta__buttons {
position: relative;
z-index: 2;
}
.final-cta__buttons {
display: flex;
gap: var(--space-4);
justify-content: center;
flex-wrap: wrap;
}
/* ==========================================================================
14. FOOTER
========================================================================== */
.footer {
padding: var(--space-9) 0 var(--space-6);
background: #000000;
color: var(--color-white);
border-top: 1px solid rgba(255, 97, 0, 0.2);
}
.footer__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-7);
margin-bottom: var(--space-7);
}
.footer__logo {
height: 40px;
width: auto;
margin-bottom: var(--space-4);
}
.footer__tagline {
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.6);
line-height: var(--line-height-relaxed);
}
.footer__title {
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
margin-bottom: var(--space-4);
}
.footer__links {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.footer__links a {
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.7);
transition: color var(--transition-base);
}
.footer__links a:hover {
color: var(--color-vivid-orange);
}
.footer__social {
display: flex;
gap: var(--space-4);
margin-top: var(--space-5);
}
.footer__social-link {
color: rgba(255, 255, 255, 0.7);
transition: all var(--transition-base);
}
.footer__social-link:hover {
color: var(--color-vivid-orange);
transform: translateY(-2px);
}
.footer__bottom {
padding-top: var(--space-6);
border-top: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
}
.footer__bottom p {
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.5);
}
/* ==========================================================================
15. RESPONSIVE DESIGN
========================================================================== */
@media (max-width: 1024px) {
.featured .container,
.philosophy .container {
grid-template-columns: 1fr;
gap: var(--space-7);
}
.featured__content .section__title {
text-align: center;
}
.featured__content {
text-align: center;
}
.philosophy .section__title {
text-align: center;
}
}
@media (max-width: 768px) {
:root {
--container-padding: var(--space-4);
}
/* Mobile Navigation */
.nav__toggle {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.nav__menu {
position: fixed;
top: 80px;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
flex-direction: column;
padding: var(--space-7) var(--space-5);
gap: var(--space-2);
transform: translateX(100%);
opacity: 0;
visibility: hidden;
transition: all 0.5s var(--ease-smooth);
box-shadow: inset 0 1px 0 rgba(255, 97, 0, 0.1);
overflow-y: auto;
}
.nav__menu.active {
transform: translateX(0);
opacity: 1;
visibility: visible;
}
.nav__menu.active .nav__item {
animation: mobileNavSlideIn 0.4s var(--ease-bounce) forwards;
}
.nav__menu.active .nav__item[data-index="0"] {
animation-delay: 0.1s;
}
.nav__menu.active .nav__item[data-index="1"] {
animation-delay: 0.15s;
}
.nav__menu.active .nav__item[data-index="2"] {
animation-delay: 0.2s;
}
.nav__menu.active .nav__item[data-index="3"] {
animation-delay: 0.25s;
}
.nav__menu.active .nav__item[data-index="4"] {
animation-delay: 0.3s;
}
@keyframes mobileNavSlideIn {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.nav__item {
width: 100%;
opacity: 0;
}
.nav__link {
width: 100%;
justify-content: space-between;
padding: var(--space-4);
font-size: var(--font-size-lg);
border-radius: 12px;
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.nav__link-ripple {
height: 3px;
}
.nav__link--cta {
background: linear-gradient(135deg, var(--color-vivid-orange) 0%, var(--orange-700) 100%);
border: none;
}
/* Mobile Nav Background Effects */
.nav__menu::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--liquid-gradient-1);
opacity: 0.3;
pointer-events: none;
}
/* Hero with premium layout */
.hero {
min-height: auto;
padding: calc(80px + var(--space-8)) 0 var(--space-8);
}
.hero__container {
grid-template-columns: 1fr;
gap: var(--space-7);
}
.hero__content {
text-align: center;
max-width: 100%;
order: 1;
}
.hero__visual {
height: 400px;
order: 2;
}
.hero__visual-frame {
width: 100%;
max-width: 400px;
height: 400px;
}
.hero__metric-card {
padding: var(--space-3) var(--space-4);
}
.hero__metric-card--1 {
top: 5%;
right: 0%;
}
.hero__metric-card--2 {
bottom: 10%;
left: 0%;
}
.hero__metric-card--3 {
top: 35%;
right: 0%;
}
.hero__metric-number {
font-size: var(--font-size-xl);
}
.hero__visual-badge {
top: 16px;
right: 16px;
padding: var(--space-2) var(--space-4);
font-size: var(--font-size-xs);
}
.hero__label {
justify-content: center;
}
.hero__title-line {
font-size: clamp(var(--font-size-3xl), 10vw, var(--font-size-4xl));
flex-direction: column;
gap: var(--space-2);
text-align: center;
justify-content: center;
}
.hero__title-cycler {
min-width: 220px;
height: 1em;
overflow: visible;
}
.hero__title-line {
gap: var(--space-2);
line-height: 1;
}
.hero__word {
font-size: 1em;
}
.hero__accent-line {
width: 60px;
margin-left: auto;
margin-right: auto;
}
.hero__manifesto-wrapper {
text-align: center;
}
.hero__manifesto {
font-size: var(--font-size-xl);
}
.hero__manifesto-sub {
font-size: var(--font-size-base);
max-width: 100%;
}
.hero__cta {
flex-direction: column;
align-items: stretch;
}
.btn--hero {
width: 100%;
min-width: auto;
}
.hero__trust-indicators {
justify-content: center;
gap: var(--space-5);
}
.hero__scroll-indicator {
display: none;
}
/* Services belt */
.services-belt {
padding: var(--space-7) 0;
}
.services-belt__item {
font-size: var(--font-size-base);
padding: var(--space-4) var(--space-5);
gap: var(--space-2);
}
.services-belt__icon-img {
width: 20px;
height: 20px;
}
.services-belt__separator {
margin: 0 var(--space-3);
font-size: var(--font-size-sm);
}
/* Case tiles */
.cases__grid {
grid-template-columns: 1fr;
}
.case-tile__media {
height: 200px;
}
/* Conviction band */
.conviction-band__proof {
gap: var(--space-6);
}
.conviction-band__number {
font-size: var(--font-size-3xl);
}
/* Contact kicker */
.contact-kicker {
bottom: var(--space-4);
right: var(--space-4);
padding: var(--space-3) var(--space-5);
}
.contact-kicker__text {
font-size: var(--font-size-base);
}
/* Other sections */
.dual-intro__grid,
.services__grid {
grid-template-columns: 1fr;
}
.proof-bar__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-5);
}
.featured__visual {
height: 300px;
}
.featured__card {
width: 250px;
height: 250px;
}
.philosophy__visual {
height: 300px;
}
.final-cta__buttons {
flex-direction: column;
}
.final-cta__buttons .btn {
width: 100%;
}
}
@media (max-width: 480px) {
.proof-bar__grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
16. ANIMATIONS & INTERACTIONS
========================================================================== */
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: all var(--transition-flow);
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
.flow-left {
opacity: 0;
transform: translateX(-50px);
transition: all var(--transition-flow);
}
.flow-left.visible {
opacity: 1;
transform: translateX(0);
}
.flow-right {
opacity: 0;
transform: translateX(50px);
transition: all var(--transition-flow);
}
.flow-right.visible {
opacity: 1;
transform: translateX(0);
}
/* ==========================================================================
17. WATER-FLOW EFFECTS & ANIMATIONS
========================================================================== */
/* 1. Stream Flow Background Animation */
.stream-flow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.stream-flow::before {
content: '';
position: absolute;
top: 50%;
left: -100%;
width: 200%;
height: 200px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 97, 0, 0.05) 25%,
rgba(255, 97, 0, 0.08) 50%,
rgba(255, 97, 0, 0.05) 75%,
transparent 100%);
transform: translateY(-50%) skewY(-3deg);
animation: streamFlow 20s linear infinite;
}
@keyframes streamFlow {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
/* 2. Gradient Drift Overlay */
.gradient-drift {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
rgba(255, 97, 0, 0.15) 0%,
rgba(255, 175, 63, 0.1) 50%,
rgba(243, 246, 217, 0.05) 100%);
background-size: 200% 200%;
animation: gradientDrift 15s ease infinite;
pointer-events: none;
z-index: 1;
opacity: 0.6;
}
@keyframes gradientDrift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* 3. Liquid Text Reveal Effect */
.liquid-text {
display: inline-block;
overflow: hidden;
position: relative;
}
.liquid-text::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 97, 0, 0.3) 50%,
transparent 100%);
animation: liquidReveal 2s ease-out forwards;
}
@keyframes liquidReveal {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
/* 4. Floating Particles Container */
.particles-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
z-index: 1;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: radial-gradient(circle, rgba(255, 97, 0, 0.6) 0%, transparent 70%);
border-radius: 50%;
animation: floatParticle 8s ease-in-out infinite;
opacity: 0;
}
@keyframes floatParticle {
0% {
transform: translateY(0) translateX(0) scale(1);
opacity: 0;
}
10% {
opacity: 0.6;
}
90% {
opacity: 0.2;
}
100% {
transform: translateY(-100vh) translateX(50px) scale(0.5);
opacity: 0;
}
}
/* 5. Wave Divider Animations */
.wave-divider {
position: relative;
width: 100%;
height: 80px;
overflow: hidden;
}
.wave-divider svg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.wave-divider .wave-path-1 {
animation: waveMotion1 8s ease-in-out infinite;
}
.wave-divider .wave-path-2 {
animation: waveMotion2 10s ease-in-out infinite;
opacity: 0.5;
}
@keyframes waveMotion1 {
0%,
100% {
d: path('M0,40 Q250,20 500,40 T1000,40 T1500,40 V100 H0 Z');
}
50% {
d: path('M0,40 Q250,60 500,40 T1000,40 T1500,40 V100 H0 Z');
}
}
@keyframes waveMotion2 {
0%,
100% {
d: path('M0,50 Q250,30 500,50 T1000,50 T1500,50 V100 H0 Z');
}
50% {
d: path('M0,50 Q250,70 500,50 T1000,50 T1500,50 V100 H0 Z');
}
}
/* 6. Water Ripple Hover Effect */
.ripple-effect {
position: relative;
overflow: hidden;
}
.ripple-effect::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 97, 0, 0.4) 0%, transparent 70%);
transform: translate(-50%, -50%);
opacity: 0;
transition: all 0.6s ease-out;
}
.ripple-effect:hover::after {
width: 300px;
height: 300px;
opacity: 1;
}
/* Apply ripple to buttons and cards */
.btn,
.service-card,
.dual-intro__card {
position: relative;
overflow: hidden;
}
.btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
pointer-events: none;
z-index: 0;
}
.btn:hover::after {
width: 300px;
height: 300px;
}
.btn span {
position: relative;
z-index: 1;
}
/* 7. Scroll-Activated Line Flow */
.flow-line {
position: fixed;
top: 0;
left: 50%;
width: 2px;
height: 100vh;
transform: translateX(-50%);
pointer-events: none;
z-index: 999;
}
.flow-line-path {
stroke: var(--color-vivid-orange);
stroke-width: 2;
fill: none;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
filter: drop-shadow(0 0 8px rgba(255, 97, 0, 0.4));
animation: drawLine 2s ease-out forwards;
}
@keyframes drawLine {
to {
stroke-dashoffset: 0;
}
}
/* 8. Transparent Flow Gradient Mask */
.flow-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg,
transparent 0%,
rgba(255, 97, 0, 0.03) 25%,
transparent 50%,
rgba(255, 97, 0, 0.03) 75%,
transparent 100%);
background-size: 400% 400%;
animation: flowMask 20s ease infinite;
pointer-events: none;
mix-blend-mode: overlay;
}
@keyframes flowMask {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0% 0%;
}
}
/* 9. Droplet Trail Effect */
.droplet-trail {
position: absolute;
width: 2px;
height: 20px;
background: linear-gradient(180deg,
rgba(255, 97, 0, 0.8) 0%,
rgba(255, 97, 0, 0.4) 50%,
transparent 100%);
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
animation: dropletFall 3s ease-in infinite;
opacity: 0;
pointer-events: none;
}
@keyframes dropletFall {
0% {
transform: translateY(0) scaleY(1);
opacity: 0;
}
10% {
opacity: 0.8;
}
90% {
opacity: 0.2;
}
100% {
transform: translateY(500px) scaleY(1.5);
opacity: 0;
}
}
/* 10. Shimmer Text Effect */
.shimmer-text {
background: linear-gradient(90deg,
var(--neutral-900) 0%,
var(--color-vivid-orange) 50%,
var(--neutral-900) 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmerMove 3s ease-in-out infinite;
}
@keyframes shimmerMove {
0%,
100% {
background-position: 200% 0;
}
50% {
background-position: -200% 0;
}
}
/* 11. Pulse Glow Effect */
.pulse-glow {
position: relative;
}
.pulse-glow::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(255, 97, 0, 0.3) 0%, transparent 70%);
border-radius: inherit;
animation: pulseGlow 2s ease-in-out infinite;
pointer-events: none;
z-index: -1;
}
@keyframes pulseGlow {
0%,
100% {
opacity: 0.5;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 1;
transform: translate(-50%, -50%) scale(1.2);
}
}
/* 12. Liquid Button Effect */
.btn-liquid {
position: relative;
overflow: hidden;
}
.btn-liquid::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0%;
background: linear-gradient(180deg,
rgba(255, 97, 0, 0.8) 0%,
var(--orange-700) 100%);
transition: height 0.4s ease;
z-index: -1;
}
.btn-liquid:hover::before {
height: 100%;
}
/* Enhanced service cards with flow */
.service-card {
transition: all var(--transition-base);
}
.service-card:hover {
animation: cardFloat 3s ease-in-out infinite;
}
@keyframes cardFloat {
0%,
100% {
transform: translateY(-8px) rotate(0deg);
}
50% {
transform: translateY(-12px) rotate(1deg);
}
}
/* Enhanced section backgrounds */
.services,
.dual-intro {
position: relative;
overflow: hidden;
}
/* Stagger animation delays */
.service-card:nth-child(1) {
animation-delay: 0s;
}
.service-card:nth-child(2) {
animation-delay: 0.1s;
}
.service-card:nth-child(3) {
animation-delay: 0.2s;
}
.service-card:nth-child(4) {
animation-delay: 0.3s;
}
.service-card:nth-child(5) {
animation-delay: 0.4s;
}
.service-card:nth-child(6) {
animation-delay: 0.5s;
}
/* ==========================================================================
17.5. SECTION DECORATIONS - Water Ripple Lines
========================================================================== */
.section-decoration {
position: absolute;
width: 100%;
pointer-events: none;
z-index: 1;
}
.section-decoration--top {
top: 0;
left: 0;
height: 60px;
animation: decorationFlow 8s ease-in-out infinite;
}
.section-decoration--bottom {
bottom: 0;
left: 0;
height: 60px;
animation: decorationFlow 10s ease-in-out infinite reverse;
}
@keyframes decorationFlow {
0%,
100% {
transform: translateX(0) scaleX(1);
opacity: 0.3;
}
50% {
transform: translateX(20px) scaleX(1.02);
opacity: 0.6;
}
}
/* ==========================================================================
18. MODERN UTILITY CLASSES - Glassmorphism & Effects
========================================================================== */
/* Glass Card */
.glass {
background: var(--glass-white);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-border-light);
box-shadow: var(--glass-shadow-md);
}
.glass-dark {
background: var(--glass-dark);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--glass-border-dark);
}
.glass-orange {
background: var(--glass-orange);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 97, 0, 0.2);
}
/* Liquid Gradient Backgrounds */
.liquid-bg {
background: var(--liquid-gradient-1);
background-size: 200% 200%;
animation: liquidFlow 10s ease-in-out infinite;
}
@keyframes liquidFlow {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.liquid-animated {
position: relative;
overflow: hidden;
}
.liquid-animated::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: var(--liquid-gradient-animated);
animation: rotateLiquid var(--liquid-speed) linear infinite;
opacity: 0.6;
}
@keyframes rotateLiquid {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Water Ripple Line Decorations */
.ripple-line {
position: relative;
}
.ripple-line::before {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--color-vivid-orange) 50%,
transparent 100%);
animation: rippleExpand 2s ease-in-out infinite;
}
@keyframes rippleExpand {
0%,
100% {
transform: scaleX(0.8);
opacity: 0.5;
}
50% {
transform: scaleX(1);
opacity: 1;
}
}
/* 3D Tilt Effect */
.tilt-3d {
transform-style: preserve-3d;
perspective: var(--perspective);
transition: transform 0.3s var(--ease-smooth);
}
.tilt-3d:hover {
transform: rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) scale(1.02);
}
/* Smooth Elevation */
.elevate-sm {
transition: all 0.3s var(--ease-smooth);
}
.elevate-sm:hover {
transform: translateY(-4px);
box-shadow: var(--glass-shadow-md);
}
.elevate-md {
transition: all 0.3s var(--ease-smooth);
}
.elevate-md:hover {
transform: translateY(-8px);
box-shadow: var(--glass-shadow-lg);
}
/* Micro-interactions */
.micro-bounce {
transition: transform 0.2s var(--ease-bounce);
}
.micro-bounce:active {
transform: scale(0.95);
}
.micro-glow {
position: relative;
transition: all 0.3s ease;
}
.micro-glow::after {
content: '';
position: absolute;
inset: -4px;
background: radial-gradient(circle, rgba(255, 97, 0, 0.2) 0%, transparent 70%);
border-radius: inherit;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: -1;
}
.micro-glow:hover::after {
opacity: 1;
}
/* Scroll-based Parallax Classes */
.parallax-slow {
transition: transform 0.3s var(--ease-liquid);
}
.parallax-medium {
transition: transform 0.3s var(--ease-liquid);
}
.parallax-fast {
transition: transform 0.3s var(--ease-liquid);
}
/* Water Drop Effect */
.water-drop {
position: relative;
overflow: hidden;
}
.water-drop::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 97, 0, 0.3) 0%, transparent 70%);
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
}
.water-drop:hover::before {
width: 300px;
height: 300px;
}
/* Shimmer Loading Effect */
.shimmer {
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 97, 0, 0.1) 50%,
transparent 100%);
background-size: 200% 100%;
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
/* Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.liquid-bg,
.liquid-animated::before,
.ripple-line::before,
.shimmer {
animation: none !important;
}
}
/* ==========================================================================
19. PAGE-SPECIFIC STYLES
========================================================================== */
/* Page Hero (for internal pages) */
.page-hero {
position: relative;
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
padding: calc(80px + var(--space-9)) 0 var(--space-9);
background: linear-gradient(135deg, #000000 0%, #0D0D0D 50%, #000000 100%);
overflow: hidden;
}
.page-hero__background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.page-hero__content {
text-align: center;
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.page-hero__label {
display: inline-flex;
align-items: center;
padding: var(--space-2) var(--space-4);
background: rgba(255, 97, 0, 0.12);
border: 1px solid rgba(255, 97, 0, 0.3);
border-radius: 50px;
margin-bottom: var(--space-5);
opacity: 0;
animation: fadeInUp 0.6s ease forwards;
}
.page-hero__title {
font-size: clamp(var(--font-size-4xl), 8vw, var(--font-size-5xl));
font-weight: var(--font-weight-medium);
line-height: var(--line-height-tight);
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(255, 255, 255, 1) 25%,
rgba(255, 133, 51, 0.9) 50%,
rgba(255, 255, 255, 1) 75%,
rgba(255, 255, 255, 0.95) 100%);
background-size: 300% 300%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: pageHeroGlow 7s ease-in-out infinite;
margin-bottom: var(--space-4);
opacity: 0;
animation: fadeInUp 0.6s ease 0.1s forwards, pageHeroGlow 7s ease-in-out 1s infinite;
}
@keyframes pageHeroGlow {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.page-hero__subtitle {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-light);
line-height: var(--line-height-relaxed);
color: rgba(255, 255, 255, 0.7);
margin-top: var(--space-6);
opacity: 0;
animation: fadeInUp 0.6s ease 0.3s forwards;
}
/* Offerings Grid */
.offerings-grid {
padding: var(--space-10) 0;
background: #000000;
position: relative;
}
.offerings-grid__layout {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: var(--space-6);
margin-top: var(--space-8);
}
/* Offering Card */
.offering-card {
position: relative;
padding: var(--space-7);
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 97, 0, 0.15);
border-radius: var(--border-radius-lg);
transition: all 0.4s var(--ease-smooth);
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
}
.offering-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, rgba(255, 97, 0, 0.05) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.4s ease;
}
.offering-card:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 97, 0, 0.5);
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(255, 97, 0, 0.3);
}
.offering-card:hover::before {
opacity: 1;
}
.offering-card--featured {
border-color: rgba(255, 97, 0, 0.3);
}
.offering-card__badge {
position: absolute;
top: var(--space-4);
right: var(--space-4);
padding: var(--space-2) var(--space-4);
background: var(--color-vivid-orange);
color: var(--color-white);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: 50px;
box-shadow: 0 4px 12px rgba(255, 97, 0, 0.4);
}
.offering-card__icon {
width: var(--icon-lg);
height: var(--icon-lg);
margin-bottom: var(--space-5);
color: var(--color-vivid-orange);
transition: all 0.4s var(--ease-smooth);
}
.offering-card:hover .offering-card__icon {
transform: scale(1.1) rotate(5deg);
}
.offering-card__title {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-medium);
margin-bottom: var(--space-4);
transition: all 0.3s var(--ease-smooth);
}
.offering-card__title a {
background: linear-gradient(90deg,
var(--color-white) 0%,
var(--color-white) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: all 0.4s var(--ease-smooth);
}
.offering-card:hover .offering-card__title a {
background: linear-gradient(90deg,
var(--color-white) 0%,
var(--color-vivid-orange) 30%,
#FFAF3F 50%,
var(--color-vivid-orange) 70%,
var(--color-white) 100%);
background-size: 200% auto;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: offerShimmer 3s ease-in-out infinite;
}
@keyframes offerShimmer {
0%,
100% {
background-position: 0% center;
}
50% {
background-position: 200% center;
}
}
.offering-card__desc {
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: rgba(255, 255, 255, 0.7);
margin-bottom: var(--space-5);
flex-grow: 1;
}
.offering-card__features {
list-style: none;
margin-bottom: var(--space-6);
}
.offering-card__features li {
position: relative;
padding-left: var(--space-5);
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.6);
margin-bottom: var(--space-3);
}
.offering-card__features li::before {
content: '→';
position: absolute;
left: 0;
color: var(--color-vivid-orange);
font-weight: var(--font-weight-bold);
}
.offering-card__link {
display: inline-flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) var(--space-6);
background: var(--color-vivid-orange);
border: 2px solid var(--color-vivid-orange);
border-radius: 8px;
color: var(--color-white);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-base);
transition: all 0.3s var(--ease-smooth);
align-self: flex-start;
margin-top: var(--space-4);
text-decoration: none;
cursor: pointer;
}
.offering-card__link span {
position: relative;
z-index: 1;
}
.offering-card__link svg {
transition: transform 0.3s var(--ease-smooth);
flex-shrink: 0;
}
.offering-card__link:hover {
background: #FF7720;
border-color: #FF7720;
transform: translateX(4px);
box-shadow: 0 8px 24px rgba(255, 97, 0, 0.4);
}
.offering-card__link:hover svg {
transform: translateX(6px);
}
/* Content Section Styles */
.content-section {
padding: var(--space-10) 0;
background: #000000;
position: relative;
}
.outcomes-section {
padding: var(--space-10) 0;
background: linear-gradient(180deg, #0A0A0A 0%, #000000 100%);
position: relative;
}
.demo-section {
padding: var(--space-10) 0;
background: #000000;
position: relative;
}
.deliverables-section {
padding: var(--space-10) 0;
background: linear-gradient(180deg, #000000 0%, #0D0D0D 100%);
position: relative;
}
/* Pain Points Grid */
.pain-points-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-6);
margin-top: var(--space-8);
}
.pain-point-card {
padding: var(--space-6);
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 97, 0, 0.1);
border-radius: var(--border-radius-lg);
transition: all 0.3s var(--ease-smooth);
}
.pain-point-card:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 97, 0, 0.3);
transform: translateY(-4px);
}
.pain-point-card__icon {
font-size: var(--font-size-3xl);
margin-bottom: var(--space-4);
}
.pain-point-card__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-medium);
color: var(--color-white);
margin-bottom: var(--space-3);
}
.pain-point-card__text {
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.6);
line-height: var(--line-height-relaxed);
}
/* Conviction Line */
.conviction-line {
margin-top: var(--space-9);
padding: var(--space-6);
text-align: center;
border-top: 1px solid rgba(255, 97, 0, 0.2);
border-bottom: 1px solid rgba(255, 97, 0, 0.2);
}
.conviction-line p {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-light);
color: var(--color-vivid-orange);
font-style: italic;
}
/* Outcomes Grid */
.outcomes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-7);
margin-top: var(--space-8);
}
.outcome-card {
position: relative;
padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
background: rgba(255, 255, 255, 0.02);
border-left: 3px solid var(--color-vivid-orange);
border-radius: var(--border-radius);
transition: all 0.3s var(--ease-smooth);
}
.outcome-card:hover {
background: rgba(255, 255, 255, 0.04);
transform: translateX(8px);
box-shadow: -4px 0 20px rgba(255, 97, 0, 0.2);
}
.outcome-card__number {
position: absolute;
left: var(--space-3);
top: var(--space-3);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
color: var(--color-vivid-orange);
opacity: 0.4;
}
.outcome-card__title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-medium);
color: var(--color-white);
margin-bottom: var(--space-3);
}
.outcome-card__text {
font-size: var(--font-size-base);
color: rgba(255, 255, 255, 0.7);
line-height: var(--line-height-relaxed);
}
/* Demo Grid */
.demo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--space-7);
margin-top: var(--space-8);
}
.demo-card {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 97, 0, 0.12);
border-radius: var(--border-radius-lg);
overflow: hidden;
transition: all 0.4s var(--ease-smooth);
}
.demo-card:hover {
border-color: rgba(255, 97, 0, 0.4);
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(255, 97, 0, 0.3);
}
.demo-card__media {
position: relative;
width: 100%;
height: 240px;
overflow: hidden;
background: rgba(255, 97, 0, 0.03);
}
.demo-card__placeholder {
width: 100%;
height: 100%;
}
.demo-card__placeholder svg {
width: 100%;
height: 100%;
object-fit: cover;
}
.demo-card__content {
padding: var(--space-6);
}
.demo-card__tag {
display: inline-block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-vivid-orange);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-3);
}
.demo-card__title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-medium);
color: var(--color-white);
margin-bottom: var(--space-3);
}
.demo-card__desc {
font-size: var(--font-size-base);
color: rgba(255, 255, 255, 0.6);
line-height: var(--line-height-relaxed);
}
/* Deliverables Grid */
.deliverables-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-6);
margin-top: var(--space-8);
}
.deliverable-item {
display: flex;
gap: var(--space-4);
padding: var(--space-5);
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 97, 0, 0.08);
border-radius: var(--border-radius);
transition: all 0.3s var(--ease-smooth);
}
.deliverable-item:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 97, 0, 0.2);
}
.deliverable-item__icon {
flex-shrink: 0;
}
.deliverable-item__title {
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: var(--color-white);
margin-bottom: var(--space-2);
}
.deliverable-item__text {
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.5);
}
/* Timeline Badge */
.timeline-badge {
display: inline-flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) var(--space-6);
margin-top: var(--space-8);
background: rgba(255, 97, 0, 0.1);
border: 1px solid rgba(255, 97, 0, 0.3);
border-radius: 50px;
}
.timeline-badge__label {
font-size: var(--font-size-base);
color: rgba(255, 255, 255, 0.7);
}
.timeline-badge__value {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-medium);
color: var(--color-vivid-orange);
}
/* Audit Types Grid */
.audit-types-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--space-7);
margin-top: var(--space-8);
}
.audit-type-card {
position: relative;
padding: var(--space-7);
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 97, 0, 0.15);
border-left: 4px solid var(--color-vivid-orange);
border-radius: var(--border-radius-lg);
transition: all 0.4s var(--ease-smooth);
}
.audit-type-card:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 97, 0, 0.4);
transform: translateX(8px);
box-shadow: 0 12px 40px rgba(255, 97, 0, 0.3);
}
.audit-type-card__number {
position: absolute;
top: var(--space-5);
right: var(--space-5);
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-light);
color: var(--color-vivid-orange);
opacity: 0.3;
}
.audit-type-card__title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-medium);
color: var(--color-white);
margin-bottom: var(--space-3);
padding-right: var(--space-8);
}
.audit-type-card__subtitle {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-vivid-orange);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-4);
}
.audit-type-card__desc {
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: rgba(255, 255, 255, 0.7);
margin-bottom: var(--space-5);
}
.audit-type-card__deliverables {
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.5);
padding-top: var(--space-4);
border-top: 1px solid rgba(255, 97, 0, 0.1);
}
.audit-type-card__deliverables strong {
color: var(--color-vivid-orange);
font-weight: var(--font-weight-medium);
}
/* Process Steps */
.process-steps {
display: flex;
flex-direction: column;
gap: var(--space-7);
margin-top: var(--space-9);
position: relative;
}
.process-steps::before {
content: '';
position: absolute;
left: 32px;
top: 40px;
bottom: 40px;
width: 2px;
background: linear-gradient(180deg,
rgba(255, 97, 0, 0.5) 0%,
rgba(255, 97, 0, 0.2) 50%,
rgba(255, 97, 0, 0.5) 100%);
}
.process-step {
display: flex;
gap: var(--space-6);
position: relative;
}
.process-step__number {
flex-shrink: 0;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 97, 0, 0.1);
border: 2px solid var(--color-vivid-orange);
border-radius: 50%;
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--color-vivid-orange);
box-shadow: 0 0 20px rgba(255, 97, 0, 0.3);
position: relative;
z-index: 2;
}
.process-step__content {
flex: 1;
padding-top: var(--space-2);
}
.process-step__title {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-medium);
color: var(--color-white);
margin-bottom: var(--space-3);
}
.process-step__desc {
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: rgba(255, 255, 255, 0.7);
}
/* Engagement Models */
.engagement-models {
display: flex;
flex-direction: column;
gap: var(--space-7);
margin-top: var(--space-8);
}
.engagement-card {
padding: var(--space-7);
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 97, 0, 0.15);
border-radius: var(--border-radius-lg);
transition: all 0.4s var(--ease-smooth);
}
.engagement-card:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 97, 0, 0.4);
transform: translateX(8px);
box-shadow: 0 16px 48px rgba(255, 97, 0, 0.3);
}
.engagement-card__header {
margin-bottom: var(--space-5);
}
.engagement-card__title {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-medium);
color: var(--color-white);
margin-bottom: var(--space-2);
}
.engagement-card__subtitle {
font-size: var(--font-size-base);
color: var(--color-vivid-orange);
font-weight: var(--font-weight-medium);
}
.engagement-card__desc {
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: rgba(255, 255, 255, 0.7);
margin-bottom: var(--space-5);
}
.engagement-card__features {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-3);
}
.engagement-card__features li {
position: relative;
padding-left: var(--space-5);
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.6);
}
.engagement-card__features li::before {
content: '→';
position: absolute;
left: 0;
color: var(--color-vivid-orange);
}
/* Tools Grid */
.tools-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-5);
margin-top: var(--space-8);
}
.tool-card {
padding: var(--space-5);
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 97, 0, 0.1);
border-radius: var(--border-radius);
text-align: center;
transition: all 0.3s var(--ease-smooth);
}
.tool-card:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 97, 0, 0.3);
transform: translateY(-4px);
}
.tool-card__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-medium);
color: var(--color-white);
margin-bottom: var(--space-2);
}
.tool-card__text {
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.6);
}
/* Contact Form Styles */
.contact-form {
width: 100%;
}
.form-group {
margin-bottom: var(--space-6);
}
.form-label {
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-white);
margin-bottom: var(--space-2);
}
.form-input,
.form-textarea {
width: 100%;
padding: var(--space-4);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 97, 0, 0.2);
border-radius: var(--border-radius);
color: var(--color-white);
font-size: var(--font-size-base);
font-family: inherit;
transition: all 0.3s var(--ease-smooth);
}
.form-input:focus,
.form-textarea:focus {
outline: none;
background: rgba(255, 255, 255, 0.05);
border-color: var(--color-vivid-orange);
box-shadow: 0 0 0 3px rgba(255, 97, 0, 0.1);
}
.form-input::placeholder,
.form-textarea::placeholder {
color: rgba(255, 255, 255, 0.4);
}
select.form-input {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23FF6100' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-4) center;
padding-right: var(--space-8);
}
.text-content {
max-width: 800px;
margin: 0 auto;
}
.text-content p {
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
color: rgba(255, 255, 255, 0.7);
margin-bottom: var(--space-5);
}
.text-content p:last-child {
margin-bottom: 0;
}
/* Print Styles */
@media print {
.nav,
.hero__waves,
.footer {
display: none;
}
body {
background: white;
color: black;
}
}
/* ==========================================================================
PREMIUM WATER-FLOW EFFECTS & MICRO-INTERACTIONS
========================================================================== */
/* Floating Particles System */
.particles-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
z-index: 1;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: radial-gradient(circle, rgba(255, 97, 0, 0.6) 0%, transparent 70%);
border-radius: 50%;
animation: floatUp 8s linear infinite;
opacity: 0;
}
.particle:nth-child(odd) {
background: radial-gradient(circle, rgba(255, 175, 63, 0.4) 0%, transparent 70%);
animation-duration: 10s;
}
.particle:nth-child(3n) {
width: 2px;
height: 2px;
animation-duration: 12s;
}
@keyframes floatUp {
0% {
transform: translateY(100vh) translateX(0) scale(0);
opacity: 0;
}
10% {
opacity: 1;
transform: translateY(90vh) translateX(10px) scale(1);
}
50% {
opacity: 0.8;
transform: translateY(50vh) translateX(-20px) scale(1.2);
}
90% {
opacity: 0.3;
transform: translateY(10vh) translateX(15px) scale(0.8);
}
100% {
transform: translateY(-10vh) translateX(0) scale(0);
opacity: 0;
}
}
/* Stream Flow Effect */
.stream-flow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg,
transparent 0%,
rgba(255, 97, 0, 0.03) 25%,
transparent 50%,
rgba(255, 175, 63, 0.02) 75%,
transparent 100%);
background-size: 200% 200%;
animation: streamFlow 15s ease-in-out infinite;
pointer-events: none;
z-index: 1;
}
@keyframes streamFlow {
0%,
100% {
background-position: 0% 0%;
opacity: 0.5;
}
25% {
background-position: 100% 50%;
opacity: 0.8;
}
50% {
background-position: 50% 100%;
opacity: 0.6;
}
75% {
background-position: 0% 50%;
opacity: 0.7;
}
}
/* Gradient Drift Effect */
.gradient-drift {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: var(--liquid-gradient-animated);
animation: gradientDrift 25s linear infinite;
pointer-events: none;
opacity: 0.3;
z-index: 1;
}
@keyframes gradientDrift {
0% {
transform: rotate(0deg) scale(1);
}
25% {
transform: rotate(90deg) scale(1.1);
}
50% {
transform: rotate(180deg) scale(0.9);
}
75% {
transform: rotate(270deg) scale(1.05);
}
100% {
transform: rotate(360deg) scale(1);
}
}
/* Flow Mask Effect */
.flow-mask {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background: linear-gradient(0deg,
rgba(255, 97, 0, 0.08) 0%,
rgba(255, 175, 63, 0.05) 50%,
transparent 100%);
animation: flowMask 8s ease-in-out infinite;
pointer-events: none;
z-index: 2;
}
@keyframes flowMask {
0%,
100% {
opacity: 0.6;
transform: scaleY(1);
}
50% {
opacity: 0.9;
transform: scaleY(1.2);
}
}
/* Wave Divider */
.wave-divider {
position: relative;
width: 100%;
height: 100px;
color: rgba(255, 97, 0, 0.1);
overflow: hidden;
}
.wave-divider svg {
width: 100%;
height: 100%;
}
.wave-path-1 {
animation: waveFlow1 6s ease-in-out infinite;
}
.wave-path-2 {
animation: waveFlow2 8s ease-in-out infinite reverse;
}
@keyframes waveFlow1 {
0%,
100% {
d: path("M0,40 Q360,20 720,40 T1440,40 L1440,100 L0,100 Z");
}
50% {
d: path("M0,30 Q360,50 720,30 T1440,30 L1440,100 L0,100 Z");
}
}
@keyframes waveFlow2 {
0%,
100% {
d: path("M0,50 Q360,30 720,50 T1440,50 L1440,100 L0,100 Z");
}
50% {
d: path("M0,60 Q360,40 720,60 T1440,60 L1440,100 L0,100 Z");
}
}
/* Liquid Text Effect */
.liquid-text {
display: inline-block;
background: linear-gradient(90deg,
var(--color-white) 0%,
var(--color-vivid-orange) 25%,
var(--color-white) 50%,
var(--color-vivid-orange) 75%,
var(--color-white) 100%);
background-size: 400% 100%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: liquidTextFlow 6s ease-in-out infinite;
}
@keyframes liquidTextFlow {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
/* Droplet Trail Effect */
.droplet-trail {
position: fixed;
width: 8px;
height: 8px;
background: var(--ripple-gradient);
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
animation: dropletFall 3s ease-in forwards;
pointer-events: none;
z-index: 9999;
}
@keyframes dropletFall {
0% {
transform: rotate(-45deg) translateY(0) scale(1);
opacity: 0.8;
}
70% {
transform: rotate(-45deg) translateY(100vh) scale(0.8);
opacity: 0.6;
}
100% {
transform: rotate(-45deg) translateY(100vh) scale(0);
opacity: 0;
}
}
/* Shimmer Text Effect */
.shimmer-text {
background: linear-gradient(90deg,
rgba(255, 255, 255, 0.8) 0%,
rgba(255, 97, 0, 1) 25%,
rgba(255, 175, 63, 1) 50%,
rgba(255, 97, 0, 1) 75%,
rgba(255, 255, 255, 0.8) 100%);
background-size: 400% 100%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmerFlow 4s ease-in-out infinite;
}
@keyframes shimmerFlow {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
/* Pulse Glow Effect */
.pulse-glow {
position: relative;
overflow: visible;
}
.pulse-glow::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
background: var(--ripple-gradient);
border-radius: inherit;
transform: translate(-50%, -50%);
animation: pulseGlow 3s ease-in-out infinite;
pointer-events: none;
z-index: -1;
}
@keyframes pulseGlow {
0%,
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.3;
}
50% {
transform: translate(-50%, -50%) scale(1.2);
opacity: 0.6;
}
}
/* Enhanced Scroll Animations */
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s var(--ease-water-flow);
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
.flow-left {
opacity: 0;
transform: translateX(-50px) rotateY(-15deg);
transition: all 1s var(--ease-gentle-bounce);
}
.flow-left.visible {
opacity: 1;
transform: translateX(0) rotateY(0deg);
}
.flow-right {
opacity: 0;
transform: translateX(50px) rotateY(15deg);
transition: all 1s var(--ease-gentle-bounce);
}
.flow-right.visible {
opacity: 1;
transform: translateX(0) rotateY(0deg);
}
/* Flow Line Path Animation */
.flow-line-path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: drawLine 3s ease-in-out forwards;
}
@keyframes drawLine {
to {
stroke-dashoffset: 0;
}
}
/* Enhanced Hover Effects for Interactive Elements */
.service-card,
.case-tile,
.dual-intro__card,
.outcome-card,
.demo-card,
.tool-card,
.pain-point-card,
.deliverable-item {
transition: all 0.4s var(--ease-water-flow);
position: relative;
overflow: hidden;
cursor: pointer;
}
.service-card::before,
.case-tile::before,
.dual-intro__card::before,
.outcome-card::before,
.demo-card::before,
.tool-card::before,
.pain-point-card::before,
.deliverable-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 97, 0, 0.15) 50%,
transparent 100%);
transition: left 0.6s var(--ease-smooth);
z-index: 1;
pointer-events: none;
}
.service-card:hover::before,
.case-tile:hover::before,
.dual-intro__card:hover::before,
.outcome-card:hover::before,
.demo-card:hover::before,
.tool-card:hover::before,
.pain-point-card:hover::before,
.deliverable-item:hover::before {
left: 100%;
}
.service-card:hover,
.case-tile:hover,
.dual-intro__card:hover,
.outcome-card:hover,
.demo-card:hover,
.tool-card:hover,
.pain-point-card:hover,
.deliverable-item:hover {
transform: translateY(-8px) scale(1.02);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.3),
0 0 30px rgba(255, 97, 0, 0.25);
border-color: rgba(255, 97, 0, 0.4);
}
/* Enhanced Button Hover Effects */
.btn {
position: relative;
overflow: hidden;
transition: all 0.3s var(--ease-smooth);
}
.btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.4s ease;
}
.btn:hover::after {
width: 300px;
height: 300px;
}
.btn:hover {
transform: translateY(-2px);
}
.btn--primary:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 12px 32px rgba(255, 97, 0, 0.4);
}
.btn--outline:hover {
transform: translateY(-2px) scale(1.01);
border-color: rgba(255, 97, 0, 0.6);
background: rgba(255, 97, 0, 0.1);
}
/* Enhanced Link Hover Effects */
a:not(.btn):not(.nav__link) {
position: relative;
transition: all 0.3s ease;
}
a:not(.btn):not(.nav__link):hover {
color: var(--color-vivid-orange);
text-shadow: 0 0 8px rgba(255, 97, 0, 0.3);
}
/* Enhanced Icon Hover Effects */
.service-card__icon,
.dual-intro__icon,
.outcome-card__number {
transition: all 0.4s var(--ease-smooth);
}
.service-card:hover .service-card__icon,
.dual-intro__card:hover .dual-intro__icon {
transform: scale(1.1) rotate(5deg);
background: rgba(255, 97, 0, 0.2);
box-shadow: 0 8px 24px rgba(255, 97, 0, 0.3);
}
.outcome-card:hover .outcome-card__number {
transform: scale(1.1);
color: var(--color-vivid-orange);
text-shadow: 0 0 20px rgba(255, 97, 0, 0.5);
}
/* Ripple Click Effect */
.ripple-effect {
position: relative;
overflow: hidden;
}
.ripple-effect::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: var(--ripple-gradient);
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
}
.ripple-effect:active::after {
width: 300px;
height: 300px;
}
/* Magnetic Hover Effect */
.magnetic-hover {
transition: transform 0.3s var(--ease-smooth);
}
.magnetic-hover:hover {
transform: scale(1.05) translateZ(0);
}
/* Liquid Loading Animation */
.liquid-loader {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(from 0deg,
var(--color-vivid-orange) 0deg,
transparent 90deg,
transparent 270deg,
var(--color-vivid-orange) 360deg);
animation: liquidSpin 1.5s linear infinite;
position: relative;
}
.liquid-loader::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 80%;
background: var(--color-black);
border-radius: 50%;
transform: translate(-50%, -50%);
}
@keyframes liquidSpin {
to {
transform: rotate(360deg);
}
}
/* Floating Action Button with Water Ripple */
.floating-action {
position: fixed;
bottom: 30px;
right: 30px;
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--color-vivid-orange) 0%, var(--orange-700) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 25px rgba(255, 97, 0, 0.4);
cursor: pointer;
transition: all 0.3s var(--ease-smooth);
z-index: 1000;
overflow: hidden;
}
.floating-action::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.4s ease;
}
.floating-action:hover {
transform: scale(1.1) translateY(-3px);
box-shadow: 0 15px 35px rgba(255, 97, 0, 0.6);
}
.floating-action:hover::before {
width: 100%;
height: 100%;
}
/* Responsive Adjustments for Water Effects */
@media (max-width: 768px) {
.particles-container .particle {
animation-duration: 6s;
}
.stream-flow {
animation-duration: 10s;
}
.gradient-drift {
animation-duration: 15s;
}
.floating-action {
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
}
}
@media (prefers-reduced-motion: reduce) {
.particle,
.stream-flow,
.gradient-drift,
.flow-mask,
.wave-path-1,
.wave-path-2,
.liquid-text,
.shimmer-text,
.pulse-glow::after,
.liquid-loader {
animation: none;
}
.fade-in,
.flow-left,
.flow-right {
opacity: 1;
transform: none;
}
}
/* ====
======================================================================
PREMIUM SECTION ENHANCEMENTS
========================================================================== */
/* Enhanced Hero Section with Depth */
.hero {
position: relative;
background:
radial-gradient(ellipse at 30% 20%, rgba(255, 97, 0, 0.15) 0%, transparent 50%),
radial-gradient(ellipse at 70% 80%, rgba(255, 175, 63, 0.1) 0%, transparent 50%),
linear-gradient(135deg, #000000 0%, #0D0D0D 50%, #000000 100%);
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
opacity: 0.6;
animation: grainDrift 20s linear infinite;
pointer-events: none;
}
@keyframes grainDrift {
0% {
transform: translateX(0) translateY(0);
}
25% {
transform: translateX(-10px) translateY(5px);
}
50% {
transform: translateX(5px) translateY(-10px);
}
75% {
transform: translateX(-5px) translateY(8px);
}
100% {
transform: translateX(0) translateY(0);
}
}
/* Enhanced Services Belt with Liquid Flow */
.services-belt {
position: relative;
background: linear-gradient(90deg,
rgba(255, 97, 0, 0.05) 0%,
rgba(255, 175, 63, 0.08) 50%,
rgba(255, 97, 0, 0.05) 100%);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid rgba(255, 97, 0, 0.1);
border-bottom: 1px solid rgba(255, 97, 0, 0.1);
}
.services-belt::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 200%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 97, 0, 0.1) 50%,
transparent 100%);
animation: beltFlow 8s linear infinite;
}
@keyframes beltFlow {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
/* Enhanced Section Titles with Liquid Underlines */
.section__title {
position: relative;
overflow: visible;
}
.section__title::after {
background: linear-gradient(90deg,
var(--color-vivid-orange) 0%,
rgba(255, 175, 63, 0.8) 50%,
var(--color-vivid-orange) 100%);
box-shadow: 0 0 20px rgba(255, 97, 0, 0.4);
}
/* Premium Card Enhancements */
.service-card,
.dual-intro__card,
.case-tile {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.service-card::after,
.dual-intro__card::after,
.case-tile::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 97, 0, 0.5) 50%,
transparent 100%);
animation: topLineFlow 4s ease-in-out infinite;
}
@keyframes topLineFlow {
0%,
100% {
opacity: 0.3;
transform: scaleX(0.8);
}
50% {
opacity: 0.8;
transform: scaleX(1.2);
}
}
/* Enhanced Button Hover States */
.btn--primary {
position: relative;
overflow: hidden;
}
.btn--primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.2) 50%,
transparent 100%);
transition: left 0.6s ease;
}
.btn--primary:hover::before {
left: 100%;
}
/* Liquid Navigation Enhancements */
.nav__background {
background:
radial-gradient(ellipse at 50% 0%, rgba(255, 97, 0, 0.08) 0%, transparent 70%),
rgba(0, 0, 0, 0.7);
backdrop-filter: blur(40px) saturate(180%) brightness(1.2);
-webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.2);
border-bottom: 1px solid rgba(255, 97, 0, 0.15);
}
.nav.scrolled .nav__background {
background:
radial-gradient(ellipse at 50% 0%, rgba(255, 97, 0, 0.12) 0%, transparent 70%),
rgba(0, 0, 0, 0.85);
border-bottom-color: rgba(255, 97, 0, 0.3);
}
/* Enhanced Proof Bar with Liquid Counters */
.proof-bar__number {
background: linear-gradient(135deg,
var(--color-white) 0%,
var(--color-vivid-orange) 50%,
var(--color-white) 100%);
background-size: 200% 200%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: numberShimmer 3s ease-in-out infinite;
}
@keyframes numberShimmer {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
/* Premium Footer Enhancements */
.footer {
background:
radial-gradient(ellipse at 50% 100%, rgba(255, 97, 0, 0.1) 0%, transparent 50%),
linear-gradient(0deg, #000000 0%, #0A0A0A 100%);
border-top: 1px solid rgba(255, 97, 0, 0.2);
position: relative;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--color-vivid-orange) 25%,
rgba(255, 175, 63, 0.8) 50%,
var(--color-vivid-orange) 75%,
transparent 100%);
animation: footerLineFlow 6s ease-in-out infinite;
}
@keyframes footerLineFlow {
0%,
100% {
opacity: 0.5;
transform: scaleX(0.8);
}
50% {
opacity: 1;
transform: scaleX(1.2);
}
}
/* Enhanced Mobile Responsiveness */
@media (max-width: 768px) {
.hero {
background:
radial-gradient(ellipse at 50% 20%, rgba(255, 97, 0, 0.1) 0%, transparent 60%),
linear-gradient(135deg, #000000 0%, #0A0A0A 100%);
}
.services-belt::before {
animation-duration: 6s;
}
.service-card::after,
.dual-intro__card::after,
.case-tile::after {
animation-duration: 3s;
}
}
/* Enhanced Focus States for Accessibility */
.btn:focus-visible,
.nav__link:focus-visible {
outline: 2px solid var(--color-vivid-orange);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(255, 97, 0, 0.2);
}
/* Keyboard Navigation Enhancements */
.keyboard-nav .btn:focus,
.keyboard-nav .nav__link:focus {
background: rgba(255, 97, 0, 0.1);
transform: translateY(-2px);
}
/* Loading State Enhancements */
body:not(.loaded) {
opacity: 0;
transform: translateY(20px);
transition: all 0.8s var(--ease-water-flow);
}
body.loaded {
opacity: 1;
transform: translateY(0);
}
/* Premium Scroll Indicator */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: rgba(0, 0, 0, 0.1);
z-index: 9999;
}
.scroll-progress-bar {
height: 100%;
background: linear-gradient(90deg,
var(--color-vivid-orange) 0%,
rgba(255, 175, 63, 0.8) 50%,
var(--color-vivid-orange) 100%);
background-size: 200% 100%;
animation: progressShimmer 2s ease-in-out infinite;
transform-origin: left;
transition: transform 0.1s ease-out;
}
/* Enhanced Print Styles */
@media print {
.particles-container,
.stream-flow,
.gradient-drift,
.flow-mask,
.nav__liquid-canvas,
.floating-action {
display: none !important;
}
.hero,
.services-belt,
.footer {
background: white !important;
color: black !important;
}
.section__title {
color: #FF6100 !important;
-webkit-text-fill-color: #FF6100 !important;
}
}
/*
==========================================================================
FINAL PREMIUM WATER-FLOW ENHANCEMENTS
========================================================================== */
/* Advanced Liquid Morphing Background */
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 20%, rgba(255, 97, 0, 0.03) 0%, transparent 40%),
radial-gradient(circle at 80% 80%, rgba(255, 175, 63, 0.02) 0%, transparent 40%),
radial-gradient(circle at 40% 60%, rgba(255, 97, 0, 0.015) 0%, transparent 30%);
animation: morphingBackground 30s ease-in-out infinite;
pointer-events: none;
z-index: -2;
}
@keyframes morphingBackground {
0%,
100% {
transform: scale(1) rotate(0deg);
opacity: 0.6;
}
25% {
transform: scale(1.1) rotate(90deg);
opacity: 0.8;
}
50% {
transform: scale(0.9) rotate(180deg);
opacity: 0.5;
}
75% {
transform: scale(1.05) rotate(270deg);
opacity: 0.7;
}
}
/* Enhanced Scroll-Based Liquid Parallax */
.liquid-parallax {
transform: translateY(calc(var(--scroll-y, 0px) * 0.1));
transition: transform 0.1s ease-out;
}
.liquid-parallax-slow {
transform: translateY(calc(var(--scroll-y, 0px) * 0.05));
}
.liquid-parallax-fast {
transform: translateY(calc(var(--scroll-y, 0px) * 0.2));
}
/* Premium Intersection Animations */
.fade-in-liquid {
opacity: 0;
transform: translateY(40px) scale(0.95);
transition: all 1.2s var(--ease-water-flow);
}
.fade-in-liquid.visible {
opacity: 1;
transform: translateY(0) scale(1);
}
.slide-in-left-liquid {
opacity: 0;
transform: translateX(-60px) rotateY(-10deg);
transition: all 1s var(--ease-gentle-bounce);
}
.slide-in-left-liquid.visible {
opacity: 1;
transform: translateX(0) rotateY(0deg);
}
.slide-in-right-liquid {
opacity: 0;
transform: translateX(60px) rotateY(10deg);
transition: all 1s var(--ease-gentle-bounce);
}
.slide-in-right-liquid.visible {
opacity: 1;
transform: translateX(0) rotateY(0deg);
}
/* Advanced Hover Liquid Effects */
.liquid-hover {
position: relative;
overflow: hidden;
transition: all 0.4s var(--ease-water-flow);
}
.liquid-hover::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: var(--ripple-gradient);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.6s var(--ease-smooth);
opacity: 0;
}
.liquid-hover:hover::before {
width: 200%;
height: 200%;
opacity: 0.3;
}
/* Premium Text Reveal Effects */
.text-reveal-liquid {
overflow: hidden;
position: relative;
}
.text-reveal-liquid .char {
display: inline-block;
opacity: 0;
transform: translateY(100%) rotateX(-90deg);
animation: charReveal 0.8s var(--ease-gentle-bounce) forwards;
}
@keyframes charReveal {
to {
opacity: 1;
transform: translateY(0) rotateX(0deg);
}
}
/* Enhanced Button Liquid States */
.btn-liquid {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, var(--color-vivid-orange) 0%, var(--orange-700) 100%);
border: none;
color: white;
padding: 16px 32px;
border-radius: 50px;
cursor: pointer;
transition: all 0.4s var(--ease-water-flow);
}
.btn-liquid::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.3) 50%,
transparent 100%);
transition: left 0.6s ease;
}
.btn-liquid::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.4s ease;
}
.btn-liquid:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 20px 40px rgba(255, 97, 0, 0.4);
}
.btn-liquid:hover::before {
left: 100%;
}
.btn-liquid:hover::after {
width: 100%;
height: 100%;
}
.btn-liquid:active {
transform: translateY(-1px) scale(1.02);
}
/* Liquid Loading Spinner */
.liquid-spinner {
width: 40px;
height: 40px;
border-radius: 50%;
background: conic-gradient(from 0deg,
transparent 0deg,
var(--color-vivid-orange) 90deg,
transparent 180deg,
var(--color-vivid-orange) 270deg,
transparent 360deg);
animation: liquidSpinnerRotate 1.5s linear infinite;
position: relative;
}
.liquid-spinner::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 70%;
height: 70%;
background: var(--color-black);
border-radius: 50%;
transform: translate(-50%, -50%);
}
@keyframes liquidSpinnerRotate {
to {
transform: rotate(360deg);
}
}
/* Advanced Glassmorphism Cards */
.glass-card-premium {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px) saturate(180%) brightness(1.1);
-webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.1);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 24px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 0 0 1px rgba(255, 97, 0, 0.05);
position: relative;
overflow: hidden;
}
.glass-card-premium::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.3) 50%,
transparent 100%);
}
.glass-card-premium::after {
content: '';
position: absolute;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.02) 0%,
transparent 50%,
rgba(255, 97, 0, 0.02) 100%);
border-radius: 23px;
pointer-events: none;
}
/* Liquid Cursor Trail */
.cursor-trail {
position: fixed;
width: 20px;
height: 20px;
background: var(--ripple-gradient);
border-radius: 50%;
pointer-events: none;
z-index: 9999;
opacity: 0;
transform: scale(0);
transition: all 0.3s ease;
}
.cursor-trail.active {
opacity: 0.6;
transform: scale(1);
}
/* Premium Focus States */
.focus-liquid:focus-visible {
outline: none;
box-shadow:
0 0 0 3px rgba(255, 97, 0, 0.3),
0 0 0 6px rgba(255, 97, 0, 0.1),
0 8px 24px rgba(255, 97, 0, 0.2);
transform: translateY(-2px);
}
/* Liquid Progress Indicators */
.progress-liquid {
width: 100%;
height: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
overflow: hidden;
position: relative;
}
.progress-liquid-bar {
height: 100%;
background: linear-gradient(90deg,
var(--color-vivid-orange) 0%,
rgba(255, 175, 63, 0.8) 50%,
var(--color-vivid-orange) 100%);
background-size: 200% 100%;
border-radius: 4px;
animation: progressLiquidFlow 2s ease-in-out infinite;
transition: width 0.3s ease;
}
@keyframes progressLiquidFlow {
0%,
100% {
background-position: 0% center;
}
50% {
background-position: 100% center;
}
}
/* Enhanced Mobile Touch Interactions */
@media (hover: none) and (pointer: coarse) {
.liquid-hover:active::before {
width: 150%;
height: 150%;
opacity: 0.4;
}
.btn-liquid:active {
transform: scale(0.98);
}
.glass-card-premium:active {
transform: scale(0.99);
}
}
/* High Contrast Mode Support */
@media (prefers-contrast: high) {
.glass-card-premium {
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.3);
}
.btn-liquid {
border: 2px solid var(--color-white);
}
.section__title::after {
height: 6px;
}
}
/* Dark Mode Enhancements */
@media (prefers-color-scheme: dark) {
body::after {
opacity: 0.8;
}
.glass-card-premium {
background: rgba(255, 255, 255, 0.02);
border-color: rgba(255, 255, 255, 0.06);
}
}
/* Print Optimizations */
@media print {
.liquid-spinner,
.cursor-trail,
.particles-container,
.stream-flow,
.gradient-drift {
display: none !important;
}
.glass-card-premium {
background: white !important;
border: 1px solid #ccc !important;
box-shadow: none !important;
}
.section__title {
color: #FF6100 !important;
-webkit-text-fill-color: #FF6100 !important;
}
}/*
==========================================================================
COMPREHENSIVE RESPONSIVE DESIGN ENHANCEMENTS
========================================================================== */
/* Large Desktop Enhancements */
@media (min-width: 1440px) {
.container {
max-width: 1400px;
}
.hero__container {
gap: var(--space-10);
}
.section__title {
font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-5xl));
}
}
/* Desktop Responsive Improvements */
@media (max-width: 1200px) {
.hero__container {
grid-template-columns: 1.1fr 0.9fr;
gap: var(--space-8);
}
.services__grid {
grid-template-columns: repeat(2, 1fr);
}
.cases__grid {
grid-template-columns: repeat(2, 1fr);
}
.outcomes-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Tablet Landscape Responsive */
@media (max-width: 1024px) {
:root {
--container-padding: var(--space-5);
}
.hero__container {
grid-template-columns: 1fr;
gap: var(--space-7);
text-align: center;
}
.hero__visual {
order: -1;
max-width: 500px;
margin: 0 auto;
}
.dual-intro__grid {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.services__grid {
grid-template-columns: repeat(2, 1fr);
}
.cases__grid {
grid-template-columns: repeat(2, 1fr);
}
.outcomes-grid {
grid-template-columns: 1fr;
}
.demo-grid {
grid-template-columns: repeat(2, 1fr);
}
.tools-grid {
grid-template-columns: repeat(2, 1fr);
}
.pain-points-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Enhanced Mobile Navigation */
@media (max-width: 768px) {
.nav__menu {
position: fixed;
top: 80px;
left: 0;
width: 100%;
height: calc(100vh - 80px);
background: rgba(0, 0, 0, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
padding: var(--space-6);
gap: 0;
opacity: 0;
visibility: hidden;
transform: translateY(-20px);
transition: all 0.4s var(--ease-smooth);
z-index: 999;
overflow-y: auto;
}
.nav__menu.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav__item {
width: 100%;
margin-bottom: var(--space-3);
opacity: 0;
transform: translateX(-20px);
animation: none;
}
.nav__menu.active .nav__item {
animation: mobileNavItemSlide 0.4s var(--ease-smooth) forwards;
}
.nav__menu.active .nav__item[data-index="0"] { animation-delay: 0.1s; }
.nav__menu.active .nav__item[data-index="1"] { animation-delay: 0.15s; }
.nav__menu.active .nav__item[data-index="2"] { animation-delay: 0.2s; }
.nav__menu.active .nav__item[data-index="3"] { animation-delay: 0.25s; }
.nav__menu.active .nav__item[data-index="4"] { animation-delay: 0.3s; }
@keyframes mobileNavItemSlide {
to {
opacity: 1;
transform: translateX(0);
}
}
.nav__link {
display: block;
padding: var(--space-4);
font-size: var(--font-size-lg);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius);
margin-bottom: var(--space-2);
}
.nav__link:hover {
background: rgba(255, 97, 0, 0.1);
transform: translateX(8px);
}
.nav__dropdown {
position: static;
opacity: 1;
visibility: visible;
transform: none;
background: rgba(255, 97, 0, 0.05);
margin-top: var(--space-2);
border-radius: var(--border-radius);
}
.nav__toggle {
display: flex;
}
/* Enhanced Hero Mobile */
.hero {
min-height: 80vh;
padding: calc(80px + var(--space-6)) 0 var(--space-8);
}
.hero__container {
grid-template-columns: 1fr;
gap: var(--space-6);
text-align: center;
}
.hero__visual {
order: -1;
max-width: 400px;
margin: 0 auto;
}
.hero__title-line {
flex-direction: column;
gap: var(--space-2);
font-size: clamp(var(--font-size-2xl), 8vw, var(--font-size-4xl));
}
.hero__title-cycler {
min-width: auto;
width: 100%;
}
.hero__cta {
flex-direction: column;
gap: var(--space-4);
align-items: center;
}
.hero__cta .btn {
width: 100%;
max-width: 280px;
}
.hero__trust-indicators {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4);
}
/* Page Hero Mobile */
.page-hero {
padding: calc(80px + var(--space-6)) 0 var(--space-6);
min-height: 60vh;
}
.page-hero__title {
font-size: clamp(var(--font-size-xl), 6vw, var(--font-size-3xl));
}
/* Grid Layouts Mobile */
.services__grid,
.cases__grid,
.outcomes-grid,
.demo-grid,
.tools-grid,
.pain-points-grid,
.deliverables-grid {
grid-template-columns: 1fr;
gap: var(--space-5);
}
.proof-bar__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
}
/* Card Responsiveness */
.service-card,
.dual-intro__card,
.case-tile,
.outcome-card,
.demo-card,
.tool-card,
.pain-point-card {
padding: var(--space-5);
}
.service-card__icon,
.dual-intro__icon {
width: 48px;
height: 48px;
}
/* Form Responsiveness */
.contact-form {
padding: var(--space-4);
}
.form-group {
margin-bottom: var(--space-4);
}
.form-input,
.form-textarea {
padding: var(--space-4);
font-size: var(--font-size-base);
}
/* Footer Mobile */
.footer__content {
grid-template-columns: 1fr;
gap: var(--space-6);
text-align: center;
}
.footer__links {
justify-content: center;
flex-wrap: wrap;
gap: var(--space-4);
}
}
/* Mobile Landscape */
@media (max-width: 640px) {
.hero__trust-indicators {
flex-direction: column;
gap: var(--space-3);
}
.proof-bar__grid {
grid-template-columns: 1fr;
gap: var(--space-4);
}
.services-belt__item {
font-size: var(--font-size-sm);
padding: var(--space-2) var(--space-3);
}
}
/* Mobile Portrait */
@media (max-width: 480px) {
:root {
--container-padding: var(--space-3);
}
.hero__title-line {
font-size: clamp(var(--font-size-xl), 7vw, var(--font-size-2xl));
}
.hero__cta .btn {
width: 100%;
justify-content: center;
}
.service-card,
.dual-intro__card,
.case-tile,
.outcome-card,
.demo-card,
.tool-card,
.pain-point-card {
padding: var(--space-4);
}
.section__title {
font-size: clamp(var(--font-size-lg), 5vw, var(--font-size-2xl));
}
.nav__link {
font-size: var(--font-size-base);
padding: var(--space-3);
}
.page-hero__title {
font-size: clamp(var(--font-size-lg), 5vw, var(--font-size-xl));
}
.hero__manifesto {
font-size: var(--font-size-lg);
}
.hero__manifesto-sub {
font-size: var(--font-size-sm);
}
}
/* Small Mobile */
@media (max-width: 360px) {
:root {
--container-padding: var(--space-2);
}
.hero__title-line {
font-size: clamp(var(--font-size-lg), 6vw, var(--font-size-xl));
}
.service-card,
.dual-intro__card,
.case-tile {
padding: var(--space-3);
}
.nav__link {
padding: var(--space-2) var(--space-3);
}
.btn {
padding: var(--space-3) var(--space-4);
font-size: var(--font-size-sm);
}
}
/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
.service-card:active,
.case-tile:active,
.dual-intro__card:active,
.outcome-card:active,
.demo-card:active,
.tool-card:active,
.pain-point-card:active {
transform: scale(0.98);
}
.btn:active {
transform: scale(0.95);
}
/* Remove hover effects on touch devices */
.service-card:hover,
.case-tile:hover,
.dual-intro__card:hover,
.outcome-card:hover,
.demo-card:hover,
.tool-card:hover,
.pain-point-card:hover {
transform: none;
box-shadow: none;
}
/* Add tap feedback */
.service-card,
.case-tile,
.dual-intro__card,
.outcome-card,
.demo-card,
.tool-card,
.pain-point-card {
-webkit-tap-highlight-color: rgba(255, 97, 0, 0.2);
}
}
/* High DPI Display Optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.hero__visual-main-img,
.service-card__icon-img,
.nav__logo-img {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
}
/* Landscape Orientation Adjustments */
@media (orientation: landscape) and (max-height: 600px) {
.hero {
min-height: 100vh;
padding: calc(80px + var(--space-4)) 0 var(--space-4);
}
.page-hero {
min-height: 80vh;
padding: calc(80px + var(--space-4)) 0 var(--space-4);
}
.hero__scroll-indicator {
display: none;
}
}
/* Print Styles */
@media print {
.nav,
.hero__scroll-indicator,
.services-belt,
.contact-kicker,
.particles-container,
.stream-flow,
.gradient-drift,
.flow-mask {
display: none !important;
}
.hero,
.page-hero {
padding: var(--space-4) 0;
min-height: auto;
}
.section__title,
.hero__title,
.page-hero__title {
color: #FF6100 !important;
-webkit-text-fill-color: #FF6100 !important;
}
.service-card,
.dual-intro__card,
.case-tile {
border: 1px solid #ccc !important;
background: white !important;
box-shadow: none !important;
}
}/* ====
======================================================================
BANNER IMAGE ENHANCEMENTS
========================================================================== */
/* Enhanced Hero Visual Main Image */
.hero__visual-main-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: var(--border-radius-lg);
transition: all 0.6s var(--ease-smooth);
filter: brightness(1.1) contrast(1.05) saturate(1.1);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(255, 97, 0, 0.1);
}
.hero__visual-main-img:hover {
transform: scale(1.02);
filter: brightness(1.15) contrast(1.1) saturate(1.15);
box-shadow:
0 30px 60px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(255, 97, 0, 0.2),
0 0 40px rgba(255, 97, 0, 0.15);
}
/* Enhanced Hero Visual Frame */
.hero__visual-frame {
position: relative;
width: 100%;
height: 400px;
border-radius: var(--border-radius-lg);
overflow: hidden;
background: linear-gradient(135deg,
rgba(255, 97, 0, 0.1) 0%,
rgba(255, 175, 63, 0.05) 50%,
rgba(0, 0, 0, 0.1) 100%);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.hero__visual-frame::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(255, 97, 0, 0.05) 0%,
transparent 50%,
rgba(255, 175, 63, 0.03) 100%);
pointer-events: none;
z-index: 1;
}
/* Enhanced Hero Visual Image Wrapper */
.hero__visual-image-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: var(--border-radius-lg);
}
.hero__visual-image-wrapper::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg,
transparent 0%,
rgba(255, 97, 0, 0.1) 25%,
transparent 50%,
rgba(255, 175, 63, 0.08) 75%,
transparent 100%);
background-size: 200% 200%;
animation: bannerShimmer 8s ease-in-out infinite;
pointer-events: none;
z-index: 2;
}
@keyframes bannerShimmer {
0%, 100% {
background-position: 0% 0%;
opacity: 0.3;
}
50% {
background-position: 100% 100%;
opacity: 0.6;
}
}
/* Enhanced Hero Visual Pattern */
.hero__visual-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.4;
animation: patternFloat 20s linear infinite;
pointer-events: none;
z-index: 3;
}
@keyframes patternFloat {
0% { transform: translateX(0) translateY(0); }
25% { transform: translateX(-10px) translateY(5px); }
50% { transform: translateX(5px) translateY(-10px); }
75% { transform: translateX(-5px) translateY(8px); }
100% { transform: translateX(0) translateY(0); }
}
/* Enhanced Hero Visual Badge */
.hero__visual-badge {
position: absolute;
top: 20px;
right: 20px;
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 97, 0, 0.2);
border-radius: 50px;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-black);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
z-index: 4;
transition: all 0.3s var(--ease-smooth);
}
.hero__visual-badge:hover {
transform: translateY(-2px) scale(1.05);
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 0 20px rgba(255, 97, 0, 0.3);
}
.hero__visual-badge-icon {
width: 16px;
height: 16px;
filter: drop-shadow(0 1px 2px rgba(255, 97, 0, 0.3));
}
/* Responsive Banner Enhancements */
@media (max-width: 768px) {
.hero__visual-frame {
height: 300px;
}
.hero__visual-badge {
top: 15px;
right: 15px;
padding: var(--space-2) var(--space-3);
font-size: var(--font-size-xs);
}
.hero__visual-badge-icon {
width: 14px;
height: 14px;
}
}
@media (max-width: 480px) {
.hero__visual-frame {
height: 250px;
}
.hero__visual-badge {
position: static;
margin-top: var(--space-3);
align-self: flex-start;
}
}
/* High DPI Display Optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.hero__visual-main-img {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
}
/* Print Styles for Banner */
@media print {
.hero__visual-frame {
background: white !important;
border: 1px solid #ccc !important;
box-shadow: none !important;
}
.hero__visual-main-img {
filter: none !important;
box-shadow: none !important;
}
.hero__visual-pattern,
.hero__visual-image-wrapper::after {
display: none !important;
}
}