/* Local Offline Fonts: Inter & Space Grotesk */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/inter-300.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700.ttf') format('truetype');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/space-grotesk-300.ttf') format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/space-grotesk-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/space-grotesk-500.ttf') format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/space-grotesk-600.ttf') format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-700.ttf') format('truetype');
}

:root {
--bg-base: #030304;
--bg-alt: #08080A;
--surface-1: rgba(20, 20, 24, 0.4);
--surface-2: rgba(30, 30, 35, 0.6);
--surface-solid: #111116;
--border-dim: rgba(255, 255, 255, 0.04);
--border-light: rgba(255, 255, 255, 0.08);
--accent-cyan: #33D2FF;
--accent-blue: #4A8CFF;
--text-main: #F4F4F6;
--text-dim: #888894;
--text-muted: #555562;
--font-display: 'Outfit', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--easing-smooth: cubic-bezier(0.16, 1, 0.3, 1);
--easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
scroll-snap-type: y proximity;
}
body {
background-color: var(--bg-base);
color: var(--text-main);
font-family: var(--font-body);
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
section {
scroll-snap-align: start;
scroll-margin-top: 4rem;
}
.ambient-glow {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(circle at 10% 0%, rgba(74, 140, 255, 0.03) 0%, transparent 40%),
radial-gradient(circle at 90% 60%, rgba(51, 210, 255, 0.02) 0%, transparent 40%),
radial-gradient(circle at 50% 100%, rgba(74, 140, 255, 0.02) 0%, transparent 50%);
}
.noise-layer {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.03;
background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)"/%3E%3C/svg%3E');
}
.grid-layer {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.15;
background-image:
linear-gradient(var(--border-dim) 1px, transparent 1px),
linear-gradient(90deg, var(--border-dim) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%);
}
h1, h2, h3, h4, h5, .display-font {
font-family: var(--font-display);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.02em;
}
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
position: relative;
z-index: 10;
}
.tagline {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-display);
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--accent-cyan);
margin-bottom: 24px;
}
.tagline::before {
content: '';
width: 6px;
height: 6px;
background: var(--accent-cyan);
border-radius: 50%;
box-shadow: 0 0 10px var(--accent-cyan);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 28px;
border-radius: 8px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.5px;
text-decoration: none;
cursor: pointer;
transition: all 0.4s var(--easing-smooth);
border: 1px solid transparent;
}
.btn-primary {
background: var(--text-main);
color: var(--bg-base);
box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}
.btn-primary:hover {
background: #fff;
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(255, 255, 255, 0.2);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.03);
color: var(--text-main);
border-color: var(--border-light);
backdrop-filter: blur(10px);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 1s var(--easing-smooth), transform 1s var(--easing-smooth);
will-change: opacity, transform;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 90px;
display: flex;
align-items: center;
z-index: 1000;
transition: all 0.5s var(--easing-smooth);
border-bottom: 1px solid transparent;
}
header.scrolled {
height: 70px;
background: rgba(3, 3, 4, 0.75);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-light);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.header-inner {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.logo {
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
color: var(--text-main);
text-decoration: none;
letter-spacing: 2px;
display: flex;
align-items: center;
gap: 12px;
}
.logo-mark {
width: 24px;
height: 24px;
position: relative;
}
.logo-mark::before,
.logo-mark::after {
content: '';
position: absolute;
border: 1px solid var(--text-main);
border-radius: 4px;
}
.logo-mark::before {
inset: 0;
opacity: 0.5;
transform: rotate(15deg);
transition: transform 0.5s var(--easing-smooth);
}
.logo-mark::after {
inset: 2px;
background: var(--text-main);
}
.logo:hover .logo-mark::before {
transform: rotate(45deg);
border-color: var(--accent-cyan);
}
.nav-links {
display: flex;
gap: 32px;
}
.nav-links a {
color: var(--text-dim);
text-decoration: none;
font-size: 14px;
transition: color 0.3s;
}
.nav-links a:hover {
color: var(--text-main);
}
.header-actions .btn {
padding: 10px 20px;
font-size: 13px;
}
.hero {
padding: 200px 0 120px;
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.hero-content h1 {
font-size: 5.5rem;
letter-spacing: -3px;
margin-bottom: 24px;
color: #fff;
background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.6) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-content p {
font-size: 1.25rem;
color: var(--text-dim);
max-width: 520px;
margin-bottom: 40px;
line-height: 1.7;
}
.hero-actions {
display: flex;
gap: 16px;
}
.hero-visual {
position: relative;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
perspective: 1000px;
}
#hero-globe {
width: 100%;
height: 100%;
display: block;
filter: drop-shadow(0 0 30px rgba(51, 210, 255, 0.15));
}
.section-padding {
padding: 160px 0;
position: relative;
}
.bg-alt {
background-color: var(--bg-alt);
border-top: 1px solid var(--border-light);
border-bottom: 1px solid var(--border-light);
}
.split-section {
display: grid;
grid-template-columns: 5fr 6fr;
gap: 80px;
align-items: center;
}
.split-section.reverse {
grid-template-columns: 6fr 5fr;
}
.split-section.reverse .section-info { order: 2; }
.split-section.reverse .section-visual { order: 1; }
.section-info h2 {
font-size: 3rem;
margin-bottom: 24px;
color: #fff;
}
.section-info p {
font-size: 1.125rem;
color: var(--text-dim);
margin-bottom: 32px;
line-height: 1.7;
}
.feature-list {
list-style: none;
margin-bottom: 40px;
}
.feature-list li {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 20px;
color: var(--text-main);
}
.feature-icon {
width: 24px;
height: 24px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.05);
display: grid;
place-items: center;
color: var(--accent-cyan);
flex-shrink: 0;
border: 1px solid var(--border-light);
}
.g-container {
perspective: 1200px;
width: 100%;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
}
.g-stack {
position: relative;
width: 340px;
height: 460px;
transform-style: preserve-3d;
transition: transform 0.1s;
}
.g-layer {
position: absolute;
inset: 0;
border-radius: 16px;
transform-style: preserve-3d;
background: linear-gradient(145deg, rgba(30, 30, 35, 0.7) 0%, rgba(12, 12, 16, 0.9) 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
transition: all 0.6s var(--easing-smooth);
padding: 32px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.g-layer::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}
.g-layer-3 { z-index: 1; opacity: 0.4; }
.g-layer-2 { z-index: 2; opacity: 0.7; }
.g-layer-1 { z-index: 3; }
.g-header {
display: flex;
justify-content: space-between;
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 2px;
color: var(--text-dim);
margin-bottom: auto;
text-transform: uppercase;
}
.g-status {
color: var(--accent-cyan);
display: flex;
align-items: center;
gap: 6px;
}
.g-status::before {
content: '';
width: 6px;
height: 6px;
background: var(--accent-cyan);
border-radius: 50%;
box-shadow: 0 0 10px var(--accent-cyan);
}
.g-body {
transform: translateZ(30px);
margin-bottom: 24px;
}
.g-title {
font-size: 28px;
font-family: var(--font-display);
color: #fff;
margin-bottom: 8px;
}
.g-metric {
font-size: 40px;
font-weight: 300;
font-family: var(--font-display);
color: #fff;
line-height: 1;
}
.g-metric span {
font-size: 16px;
color: var(--text-dim);
}
.g-footer {
transform: translateZ(15px);
border-top: 1px solid var(--border-light);
padding-top: 16px;
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--text-dim);
}
.g-container:hover .g-layer-1 {
transform: translateZ(60px) translateY(-30px) !important;
box-shadow: 0 40px 80px rgba(0,0,0,0.8);
border-color: rgba(51, 210, 255, 0.3);
}
.g-container:hover .g-layer-2 {
transform: translateZ(-40px) translateY(30px) rotateX(4deg) !important;
opacity: 1;
}
.g-container:hover .g-layer-3 {
transform: translateZ(-100px) translateY(90px) rotateX(8deg) !important;
opacity: 1;
}
.neural-panel {
background: var(--surface-solid);
border: 1px solid var(--border-light);
border-radius: 16px;
padding: 40px;
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
display: flex;
flex-direction: column;
gap: 32px;
}
.np-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--border-light);
padding-bottom: 16px;
margin-bottom: 8px;
}
.np-title {
font-family: var(--font-display);
font-size: 14px;
color: var(--text-main);
letter-spacing: 1px;
text-transform: uppercase;
}
.np-live {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--accent-cyan);
}
.np-live::before {
content: '';
width: 8px;
height: 8px;
background: var(--accent-cyan);
border-radius: 50%;
animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.np-row {
display: flex;
align-items: center;
gap: 20px;
}
.np-control {
flex: 0 0 220px;
background: rgba(255,255,255,0.02);
padding: 16px;
border-radius: 8px;
border: 1px solid var(--border-light);
z-index: 2;
}
.np-label {
display: flex;
justify-content: space-between;
font-size: 11px;
color: var(--text-dim);
text-transform: uppercase;
margin-bottom: 12px;
font-family: var(--font-display);
}
.np-val {
color: #fff;
}
.np-toggle {
position: relative;
width: 40px;
height: 22px;
background: rgba(255,255,255,0.1);
border-radius: 11px;
cursor: pointer;
transition: background 0.3s;
}
.np-toggle.active {
background: var(--accent-blue);
}
.np-toggle-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
background: #fff;
border-radius: 50%;
transition: transform 0.3s var(--easing-smooth);
}
.np-toggle.active .np-toggle-thumb {
transform: translateX(18px);
}
.np-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
background: rgba(255,255,255,0.1);
border-radius: 2px;
outline: none;
}
.np-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
cursor: pointer;
transition: box-shadow 0.2s;
}
.np-slider:active::-webkit-slider-thumb {
box-shadow: 0 0 10px #fff;
}
.np-connector {
flex: 1;
height: 2px;
background: rgba(255,255,255,0.05);
position: relative;
overflow: hidden;
}
.np-pulse {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 100%;
opacity: 0;
transform: translateX(-40px);
}
.np-pulse.blue {
background: linear-gradient(90deg, transparent, var(--accent-blue), transparent);
box-shadow: 0 0 10px var(--accent-blue);
}
.np-pulse.cyan {
background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
box-shadow: 0 0 10px var(--accent-cyan);
}
.np-pulse.fire {
animation: pulse-travel 0.6s ease-out forwards;
opacity: 1;
}
@keyframes pulse-travel {
0% { transform: translateX(-40px); }
100% { transform: translateX(500px); }
}
.np-module {
flex: 0 0 200px;
background: var(--bg-base);
border: 1px solid var(--border-light);
padding: 16px;
border-radius: 8px;
display: flex;
align-items: center;
gap: 12px;
transition: all 0.3s;
z-index: 2;
}
.np-status-light {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.2);
transition: all 0.3s;
}
.np-module.active-blue {
border-color: rgba(74, 140, 255, 0.4);
box-shadow: inset 0 0 20px rgba(74, 140, 255, 0.05);
}
.np-module.active-blue .np-status-light {
background: var(--accent-blue);
box-shadow: 0 0 10px var(--accent-blue);
}
.np-module.active-cyan {
border-color: rgba(51, 210, 255, 0.4);
box-shadow: inset 0 0 20px rgba(51, 210, 255, 0.05);
}
.np-module.active-cyan .np-status-light {
background: var(--accent-cyan);
box-shadow: 0 0 10px var(--accent-cyan);
}
.np-mod-text {
font-size: 13px;
color: #fff;
font-family: var(--font-display);
}
.np-mod-sub {
font-size: 11px;
color: var(--text-dim);
}
.timeline-wrapper {
position: relative;
padding: 40px 0 40px 60px;
}
.tl-rail {
position: absolute;
top: 0;
bottom: 0;
left: 16px;
width: 2px;
background: rgba(255,255,255,0.05);
}
.tl-progress {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0%;
background: linear-gradient(180deg, transparent, var(--accent-blue), #fff);
box-shadow: 0 0 15px var(--accent-blue);
transition: height 1.5s var(--easing-smooth);
}
.tl-item {
position: relative;
margin-bottom: 48px;
}
.tl-item:last-child {
margin-bottom: 0;
}
.tl-marker {
position: absolute;
left: -52px;
top: 24px;
width: 16px;
height: 16px;
background: var(--bg-base);
border: 2px solid var(--border-light);
border-radius: 50%;
z-index: 2;
transition: all 0.5s;
}
.tl-content {
background: var(--surface-1);
border: 1px solid var(--border-light);
padding: 24px;
border-radius: 12px;
opacity: 0;
transform: translateX(40px) rotate(2deg);
filter: blur(5px);
transition: all 0.8s var(--easing-smooth);
}
.tl-item.active .tl-marker {
border-color: var(--accent-blue);
background: var(--accent-blue);
box-shadow: 0 0 15px var(--accent-blue);
}
.tl-item.active .tl-content {
opacity: 1;
transform: translateX(0) rotate(0);
filter: blur(0);
border-color: rgba(74, 140, 255, 0.2);
}
.tl-date {
font-family: var(--font-display);
font-size: 11px;
color: var(--accent-cyan);
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 8px;
}
.tl-title {
font-size: 18px;
color: #fff;
margin-bottom: 8px;
font-weight: 500;
}
.tl-desc {
font-size: 14px;
color: var(--text-dim);
}
.signal-section {
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.ls-container {
position: relative;
width: 100%;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 40px;
}
.ls-btn {
position: relative;
background: var(--surface-solid);
border: 1px solid rgba(255,255,255,0.1);
padding: 20px 40px;
border-radius: 100px;
cursor: pointer;
outline: none;
z-index: 2;
transition: all 0.4s var(--easing-smooth);
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.ls-btn::before {
content: '';
position: absolute;
inset: -50%;
z-index: -1;
opacity: 0;
background: conic-gradient(from 0deg, transparent 0deg, rgba(74, 140, 255, 0.4) 90deg, transparent 180deg);
animation: ls-spin 3s linear infinite;
transition: opacity 0.4s;
}
.ls-btn::after {
content: '';
position: absolute;
inset: 1px;
background: var(--surface-solid);
border-radius: 100px;
z-index: -1;
}
.ls-btn:hover {
border-color: var(--accent-blue);
transform: scale(1.05);
box-shadow: 0 0 40px rgba(74, 140, 255, 0.2);
}
.ls-btn:hover::before {
opacity: 1;
}
.ls-text {
color: #fff;
font-family: var(--font-display);
font-size: 16px;
letter-spacing: 1px;
display: flex;
gap: 2px;
}
.ls-char {
display: inline-block;
transition: transform 0.3s var(--easing-bounce);
}
.ls-btn:hover .ls-char {
transform: translateY(calc(var(--rand) * -3px));
color: var(--accent-blue);
}
.ls-burst-ring {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
border: 2px solid var(--accent-blue);
border-radius: 100px;
transform: translate(-50%, -50%) scale(1);
opacity: 0;
pointer-events: none;
}
.ls-burst-ring.active {
animation: ls-burst 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes ls-spin {
100% { transform: rotate(360deg); }
}
@keyframes ls-burst {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
border-width: 4px;
}
100% {
transform: translate(-50%, -50%) scale(1.4);
opacity: 0;
border-width: 1px;
filter: blur(4px);
}
}
.pricing-section {
padding: 120px 0 160px;
}
.pricing-header {
text-align: center;
margin-bottom: 60px;
}
.pricing-header h2 {
font-size: 3rem;
color: #fff;
margin-bottom: 16px;
}
.pricing-header p {
color: var(--text-dim);
font-size: 1.125rem;
}
.pricing-accordion {
display: flex;
gap: 24px;
height: 550px;
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
.pricing-card {
flex: 1;
position: relative;
background: var(--surface-solid);
border: 1px solid var(--border-light);
border-radius: 20px;
padding: 40px 32px;
overflow: hidden;
cursor: pointer;
transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
display: flex;
flex-direction: column;
}
.pricing-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--border-light), transparent);
transition: all 0.6s ease;
}
.pricing-card:hover {
flex: 2.5;
background: var(--bg-alt);
border-color: rgba(74, 140, 255, 0.3);
box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 0 30px rgba(74, 140, 255, 0.02);
}
.pricing-card:hover::before {
background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
box-shadow: 0 0 15px var(--accent-cyan);
}
.pc-top {
min-width: 250px;
transition: transform 0.5s ease;
}
.pc-title {
font-family: var(--font-display);
font-size: 20px;
color: #fff;
margin-bottom: 8px;
white-space: nowrap;
transition: color 0.3s;
}
.pricing-card:hover .pc-title {
color: var(--accent-cyan);
}
.pc-price {
font-family: var(--font-display);
font-size: 40px;
font-weight: 300;
color: #fff;
line-height: 1;
margin-bottom: 16px;
white-space: nowrap;
}
.pc-price span {
font-size: 16px;
color: var(--text-dim);
}
.pc-desc {
color: var(--text-dim);
font-size: 13px;
line-height: 1.5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
transition: opacity 0.3s;
}
.pricing-card:hover .pc-desc {
white-space: normal;
}
.pc-hidden-content {
margin-top: 40px;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 300px;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.4s ease, transform 0.4s ease;
pointer-events: none;
}
.pricing-card:hover .pc-hidden-content {
opacity: 1;
transform: translateY(0);
transition-delay: 0.1s;
pointer-events: auto;
}
.pc-features {
list-style: none;
margin-bottom: 30px;
}
.pc-features li {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
color: var(--text-main);
margin-bottom: 16px;
}
.pc-features li::before {
content: '';
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent-blue);
box-shadow: 0 0 8px var(--accent-blue);
}
.pc-btn {
width: 100%;
padding: 14px 0;
border: 1px solid var(--border-light);
border-radius: 8px;
background: rgba(255,255,255,0.03);
color: #fff;
font-family: var(--font-body);
font-size: 14px;
cursor: pointer;
transition: all 0.3s;
text-align: center;
text-decoration: none;
display: block;
}
.pricing-card:hover .pc-btn {
background: #fff;
color: var(--bg-base);
border-color: #fff;
box-shadow: 0 0 20px rgba(255,255,255,0.1);
}
.testimonial-section {
padding: 120px 0 160px;
overflow: hidden;
border-top: 1px solid var(--border-light);
}
.orbit-wrapper {
position: relative;
width: 600px;
height: 600px;
margin: 60px auto 0;
}
.orbit-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 340px;
background: rgba(15, 15, 20, 0.8);
border: 1px solid var(--border-light);
border-radius: 16px;
padding: 40px;
text-align: center;
z-index: 10;
backdrop-filter: blur(20px);
box-shadow: 0 30px 60px rgba(0,0,0,0.6);
display: flex;
flex-direction: column;
align-items: center;
}
.oc-quote {
font-size: 16px;
line-height: 1.6;
color: var(--text-main);
margin-bottom: 24px;
font-style: italic;
opacity: 1;
transition: opacity 0.3s;
}
.oc-meta {
opacity: 1;
transition: opacity 0.3s;
}
.oc-name {
font-family: var(--font-display);
font-size: 16px;
font-weight: 500;
color: #fff;
}
.oc-role {
font-size: 13px;
color: var(--text-dim);
}
.orbit-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px dashed rgba(255,255,255,0.05);
}
.orbit-node {
position: absolute;
width: 56px;
height: 56px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.1);
top: 50%;
left: 50%;
margin: -28px 0 0 -28px;
cursor: pointer;
overflow: hidden;
transition: all 0.4s var(--easing-smooth);
background: var(--bg-alt);
}
.orbit-node img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.6;
transition: opacity 0.3s;
}
.orbit-node.active {
border-color: var(--accent-cyan);
transform: scale(1.2);
box-shadow: 0 0 20px rgba(51, 210, 255, 0.3);
z-index: 5;
}
.orbit-node.active img {
opacity: 1;
}
.orbit-node:hover {
border-color: #fff;
}
.orbit-lines-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.orbit-line {
stroke: rgba(255,255,255,0.05);
stroke-width: 1;
transition: all 0.4s;
stroke-dasharray: 4 4;
}
.orbit-line.active {
stroke: var(--accent-cyan);
stroke-width: 2;
filter: drop-shadow(0 0 4px var(--accent-cyan));
}
.cta-section {
padding: 120px 0;
text-align: center;
border-top: 1px solid var(--border-light);
background: radial-gradient(ellipse at bottom, rgba(74, 140, 255, 0.05) 0%, transparent 60%);
}
.cta-section h2 {
font-size: 3.5rem;
color: #fff;
margin-bottom: 24px;
}
.cta-section p {
font-size: 1.25rem;
color: var(--text-dim);
margin-bottom: 40px;
max-width: 500px;
margin-inline: auto;
}
footer {
border-top: 1px solid var(--border-light);
padding: 80px 0 40px;
background: var(--bg-base);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 60px;
margin-bottom: 80px;
}
.footer-brand p {
color: var(--text-dim);
margin-top: 16px;
font-size: 14px;
max-width: 250px;
}
.footer-col h4 {
color: #fff;
font-size: 14px;
margin-bottom: 24px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
}
.footer-col ul {
list-style: none;
}
.footer-col li {
margin-bottom: 12px;
}
.footer-col a {
color: var(--text-dim);
text-decoration: none;
font-size: 14px;
transition: color 0.3s;
}
.footer-col a:hover {
color: #fff;
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--border-light);
padding-top: 24px;
font-size: 13px;
color: var(--text-muted);
}
.footer-bottom a {
color: var(--text-muted);
text-decoration: none;
}
@media (max-width: 767px) {
.hero .hero-grid {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 32px;
}
.hero .hero-content {
width: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin: 0 auto;
}
.hero .hero-content p {
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
.hero .hero-actions {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
width: 100%;
}
.hero .hero-actions > a {
margin-left: auto;
margin-right: auto;
}
.hero .hero-visual {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
order: 2;
}
.hero .tagline,
.hero h1,
.hero p {
text-align: center;
}
.split-section.reverse .section-info,
.split-section .section-info {
order: 1;
}
.split-section.reverse .section-visual,
.split-section .section-visual {
order: 2;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.hero-content h1 {
font-size: 3.5rem;
}
.section-info h2 {
font-size: 2.5rem;
}
.nav-links {
display: none;
}
.np-row {
flex-direction: column;
align-items: stretch;
}
.np-connector {
width: 2px;
height: 40px;
margin: 0 auto;
}
@keyframes pulse-travel {
0% { transform: translateY(-40px); }
100% { transform: translateY(200px); }
}
.np-pulse {
width: 100%;
height: 40px;
top: -40px;
transform: translateY(-40px) translateX(0);
}
.orbit-wrapper {
width: 100%;
height: 400px;
}
.orbit-center {
width: 280px;
padding: 24px;
}
.g-stack {
width: 100%;
max-width: 340px;
}
.pricing-accordion {
flex-direction: column;
height: auto;
gap: 20px;
}
.pricing-card {
flex: none;
height: 130px;
padding: 24px;
}
.pricing-card:hover {
height: 460px;
}
.pc-hidden-content {
margin-top: 20px;
}
.footer-grid {
grid-template-columns: 1fr;
}
.footer-bottom {
flex-direction: column;
gap: 16px;
align-items: flex-start;
}
}


.testimonial-stack-card {
position: absolute;
width: 100%;
max-width: 760px;
left: 50%;
transform-origin: center center;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
}
.testimonial-stack-card.card-back-left {
top: 36px;
transform: translateX(-50%) rotate(-6deg) scale(0.93);
opacity: 0.55;
z-index: 1;
}
.testimonial-stack-card.card-back-right {
top: 54px;
transform: translateX(-50%) rotate(6deg) scale(0.95);
opacity: 0.68;
z-index: 2;
}
.testimonial-stack-card.card-front {
top: 120px;
transform: translateX(-50%) rotate(0deg) scale(1);
z-index: 3;
}
.testimonial-stack-card.card-back-left:hover {
transform: translateX(-50%) translateY(-14px) rotate(-6deg) scale(0.93);
opacity: 0.78;
}
.testimonial-stack-card.card-back-right:hover {
transform: translateX(-50%) translateY(-14px) rotate(6deg) scale(0.95);
opacity: 0.88;
}
.testimonial-stack-card.card-front:hover {
transform: translateX(-50%) translateY(-16px) rotate(0deg) scale(1.01);
}
.testimonial-premium-card {
position: relative;
overflow: hidden;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
transition:
border-color 0.45s ease,
background 0.45s ease,
box-shadow 0.45s ease;
}
.testimonial-stack-card:hover .testimonial-premium-card {
border-color: rgba(51, 210, 255, 0.16) !important;
background: rgba(255, 255, 255, 0.03) !important;
box-shadow:
0 28px 70px -28px rgba(0, 0, 0, 0.72),
0 0 30px rgba(51, 210, 255, 0.07);
}


@keyframes cms-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.cms-loading {
  position: relative;
  color: transparent !important;
  /* Override any background-image (inline styles, Tailwind bg-[url(...)]) */
  background-image: none !important;
  background-color: transparent !important;
  background: linear-gradient(90deg, 
    rgba(128, 128, 128, 0.1) 25%, 
    rgba(128, 128, 128, 0.2) 50%, 
    rgba(128, 128, 128, 0.1) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: cms-shimmer 1.5s infinite !important;
  border-radius: 12px;
  min-height: 1em;
  min-width: 3em;
  overflow: hidden;
}
.cms-loading * {
  visibility: hidden !important;
}
.cms-loading img {
  opacity: 0 !important;
}


.testimonial-stack-wrap { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.testimonial-stack-wrap:active { cursor: grabbing; }
.testimonial-stack-wrap img { -webkit-user-drag: none; pointer-events: none; }
.testimonial-stack-card {
transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease, top 0.65s cubic-bezier(0.16, 1, 0.3, 1), z-index 0s 0.15s !important;
}
.testimonial-stack-card.no-transition {
transition: none !important;
}


/* New Premium Header Overrides */
header {
transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.5s ease, border-color 0.5s ease !important;
}
header.scrolled {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom: 1px solid transparent !important;
box-shadow: none !important;
height: 70px !important;
}
header.scrolled #header-bg {
opacity: 1 !important;
}
/* Mobile Menu Animations */
.menu-open {
overflow: hidden;
}
.menu-open #mobile-menu-btn span:nth-child(1) {
transform: translateY(0) rotate(45deg) !important;
background-color: #33D2FF;
}
.menu-open #mobile-menu-btn span:nth-child(2) {
opacity: 0;
}
.menu-open #mobile-menu-btn span:nth-child(3) {
transform: translateY(0) rotate(-45deg) !important;
background-color: #33D2FF;
}
.menu-open #mobile-menu {
opacity: 1;
pointer-events: auto;
}
.menu-open .mobile-link {
opacity: 1;
transform: translateY(0);
}
.menu-open .mobile-cta {
opacity: 1;
transform: translateY(0);
}
.mobile-link { transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease, padding-left 0.3s ease; }
.mobile-link:nth-child(1) { transition-delay: 0.1s; }
.mobile-link:nth-child(2) { transition-delay: 0.15s; }
.mobile-link:nth-child(3) { transition-delay: 0.2s; }
.mobile-link:nth-child(4) { transition-delay: 0.25s; }
.mobile-cta { transition-duration: 0.5s; transition-delay: 0.3s; transition-property: opacity, transform; }

/* offline: ensure content is visible regardless of JS init state */
html,body{opacity:1!important;visibility:visible!important}
.page-loader,.site-loader,[class*='loading-screen'],[id*='loading-screen']{display:none!important}


/* Base Setup */
:root {
--bg-deep: #050505;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--bg-deep);
color: #e5e5e5;
scrollbar-width: none;
-ms-overflow-style: none;
}
body::-webkit-scrollbar {
display: none;
}
html {
scroll-behavior: smooth;
}
/* Animations */
@keyframes animationIn {
0% { opacity: 0; transform: translateY(30px); filter: blur(10px); }
100% { opacity: 1; transform: translateY(0); filter: blur(0px); }
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.animate-marquee { animation: marquee 40s linear infinite; }
@keyframes shimmer {
from { transform: translateX(-100%) skewX(-15deg); }
to { transform: translateX(200%) skewX(-15deg); }
}
@keyframes textSlide {
0% { transform: translateY(110%); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
.text-clip-anim span {
display: inline-block;
animation: textSlide 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
opacity: 0;
}
/* Flashlight Effect */
.flashlight-card { background: rgba(255, 255, 255, 0.01); }
.flashlight-card::before {
content: "";
position: absolute;
inset: 0px;
background: radial-gradient(
800px circle at var(--mouse-x) var(--mouse-y),
rgba(255, 255, 255, 0.08),
transparent 40%
);
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
z-index: 2;
}
.flashlight-card:hover::before { opacity: 1; }
/* Utility */
.glass-panel {
background: rgba(23, 23, 23, 0.6);
backdrop-filter: blur(20px);
}

.font-geist { font-family: 'Geist', sans-serif !important; }
.font-roboto { font-family: 'Roboto', sans-serif !important; }
.font-montserrat { font-family: 'Montserrat', sans-serif !important; }
.font-poppins { font-family: 'Poppins', sans-serif !important; }
.font-playfair { font-family: 'Playfair Display', serif !important; }
.font-instrument-serif { font-family: 'Instrument Serif', serif !important; }
.font-merriweather { font-family: 'Merriweather', serif !important; }
.font-bricolage { font-family: 'Bricolage Grotesque', sans-serif !important; }
.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif !important; }
.font-manrope { font-family: 'Manrope', sans-serif !important; }
.font-space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }
.font-work-sans { font-family: 'Work Sans', sans-serif !important; }
.font-pt-serif { font-family: 'PT Serif', serif !important; }
.font-geist-mono { font-family: 'Geist Mono', monospace !important; }
.font-space-mono { font-family: 'Space Mono', monospace !important; }
.font-quicksand { font-family: 'Quicksand', sans-serif !important; }
.font-nunito { font-family: 'Nunito', sans-serif !important; }

[style*="--border-gradient"]::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: var(--border-radius-before, inherit);
-webkit-mask: linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
background: var(--border-gradient);
pointer-events: none;
}

/* 3D Transform utilities */


:root {
--cursor-size: 20px;
--cursor-hover-size: 80px;
}
body {
font-family: 'Open Sans', 'Prompt', sans-serif;
/* cursor: none; */
overflow-x: hidden;
background-color: #050a14;
}
h1, h2, h3, h4, h5, h6, .font-heading {
font-family: 'Montserrat', 'Prompt', sans-serif;
}
/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #050a14; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #007bff; }
/* Liquid Glass Card Style */
.glass-panel {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border-top: 1px solid rgba(255, 255, 255, 0.15);
border-left: 1px solid rgba(255, 255, 255, 0.08);
border-right: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-panel::before {
content: '';
position: absolute;
top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
transition: 0.5s;
pointer-events: none;
z-index: 20;
}
.glass-panel:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 123, 255, 0.1);
}
.glass-panel:hover::before {
left: 100%;
transition: 0.7s ease-in-out;
}
/* Stacked Carousel Logic */
.stack-section {
--_offset-steps: 4rem;
--_scale-steps: 12;
--_opacity-steps: 15;
--_offset-steps-two: calc(var(--_offset-steps) * -1);
--_offset-steps-three: calc(var(--_offset-steps) * -2);
--scale-steps-two: calc(1 - var(--_scale-steps) * 0.01);
--scale-steps-three: calc(1 - var(--_scale-steps) * 0.02);
--opacity-steps-two: calc(1 - var(--_opacity-steps) * 0.02);
--opacity-steps-three: calc(1 - var(--_opacity-steps) * 0.04);
display: grid;
grid-template-areas: "stack";
width: min(calc(100% - 2rem), 32rem);
margin: 0 auto;
}
.stack-card {
grid-area: stack;
transition: 800ms cubic-bezier(0.23, 1, 0.32, 1);
translate: var(--_offset) 0;
order: var(--_order);
z-index: var(--_order);
scale: var(--_scale);
opacity: var(--_opacity);
/* cursor: none; */
user-select: none;
transform-style: preserve-3d;
background: rgba(5, 10, 20, 0.6);
}
.stack-card:nth-of-type(1) { --_order: var(--_1-order); --_scale: var(--_1-scale); --_opacity: var(--_1-opacity); --_offset: var(--_1-offset); }
.stack-card:nth-of-type(2) { --_order: var(--_2-order); --_scale: var(--_2-scale); --_opacity: var(--_2-opacity); --_offset: var(--_2-offset); }
.stack-card:nth-of-type(3) { --_order: var(--_3-order); --_scale: var(--_3-scale); --_opacity: var(--_3-opacity); --_offset: var(--_3-offset); }
.stack-card:nth-of-type(4) { --_order: var(--_4-order); --_scale: var(--_4-scale); --_opacity: var(--_4-opacity); --_offset: var(--_4-offset); }
.stack-section.card-1-active {
--_1-order: 4; --_1-scale: 1; --_1-opacity: 1; --_1-offset: 0;
--_2-order: 3; --_2-scale: var(--scale-steps-two); --_2-opacity: var(--opacity-steps-two); --_2-offset: var(--_offset-steps-two);
--_3-order: 2; --_3-scale: var(--scale-steps-three); --_3-opacity: var(--opacity-steps-three); --_3-offset: var(--_offset-steps-three);
--_4-order: 1; --_4-scale: calc(1 - var(--_scale-steps) * 0.03); --_4-opacity: calc(1 - var(--_opacity-steps) * 0.06); --_4-offset: calc(var(--_offset-steps) * -3);
}
.stack-section.card-2-active {
--_2-order: 4; --_2-scale: 1; --_2-opacity: 1; --_2-offset: 0;
--_3-order: 3; --_3-scale: var(--scale-steps-two); --_3-opacity: var(--opacity-steps-two); --_3-offset: var(--_offset-steps-two);
--_4-order: 2; --_4-scale: var(--scale-steps-three); --_4-opacity: var(--opacity-steps-three); --_4-offset: var(--_offset-steps-three);
--_1-order: 1; --_1-scale: calc(1 - var(--_scale-steps) * 0.03); --_1-opacity: calc(1 - var(--_opacity-steps) * 0.06); --_1-offset: calc(var(--_offset-steps) * -3);
}
.stack-section.card-3-active {
--_3-order: 4; --_3-scale: 1; --_3-opacity: 1; --_3-offset: 0;
--_4-order: 3; --_4-scale: var(--scale-steps-two); --_4-opacity: var(--opacity-steps-two); --_4-offset: var(--_offset-steps-two);
--_1-order: 2; --_1-scale: var(--scale-steps-three); --_1-opacity: var(--opacity-steps-three); --_1-offset: var(--_offset-steps-three);
--_2-order: 1; --_2-scale: calc(1 - var(--_scale-steps) * 0.03); --_2-opacity: calc(1 - var(--_opacity-steps) * 0.06); --_2-offset: calc(var(--_offset-steps) * -3);
}
.stack-section.card-4-active {
--_4-order: 4; --_4-scale: 1; --_4-opacity: 1; --_4-offset: 0;
--_1-order: 3; --_1-scale: var(--scale-steps-two); --_1-opacity: var(--opacity-steps-two); --_1-offset: var(--_offset-steps-two);
--_2-order: 2; --_2-scale: var(--scale-steps-three); --_2-opacity: var(--opacity-steps-three); --_2-offset: var(--_offset-steps-three);
--_3-order: 1; --_3-scale: calc(1 - var(--_scale-steps) * 0.03); --_3-opacity: calc(1 - var(--_opacity-steps) * 0.06); --_3-offset: calc(var(--_offset-steps) * -3);
}
/* Ambient Liquid Blobs */
.liquid-blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.6;
z-index: -1;
animation: float 10s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes float {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(30px, 50px) scale(1.1); }
}
/* Custom Cursor */
#cursor {
position: fixed; top: 0; left: 0;
width: var(--cursor-size); height: var(--cursor-size);
background-color: white; border-radius: 50%;
pointer-events: none; z-index: 9999;
transform: translate(-50%, -50%);
transition: width 0.3s, height 0.3s, background-color 0.3s;
mix-blend-mode: overlay;
backdrop-filter: blur(2px);
}
#cursor.hovered {
width: var(--cursor-hover-size); height: var(--cursor-hover-size);
opacity: 0.5; background-color: rgba(0, 123, 255, 0.5); mix-blend-mode: normal;
border: 1px solid rgba(255,255,255,0.5);
}
/* Loading Animation */
#preloader {
position: fixed; inset: 0; background: #050a14;
z-index: 10000; display: flex; justify-content: center; align-items: center;
transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}
#preloader.loaded { transform: translateY(-100%); }
.loader-bar { width: 200px; height: 1px; background: rgba(255,255,255,0.1); position: relative; overflow: hidden; }
.loader-progress { position: absolute; left: 0; top: 0; height: 100%; background: #007bff; width: 0%; transition: width 0.5s ease; }
/* Animation Utilities */
.will-change-transform { will-change: transform; }
.split-line { overflow: hidden; display: block; }
.split-line span {
display: block;
transform: translateY(100%);
transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.hero-revealed .split-line span { transform: translateY(0); }
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }
/* Grid Transition */
.service-grid {
transition: opacity 0.5s ease, transform 0.5s ease;
}
/* Marquee */
.marquee-container { mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
.marquee-content { display: flex; animation: scroll 30s linear infinite; }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
/* Inputs */
.input-group { position: relative; }
.input-group input {
width: 100%; background: transparent; border: none;
border-bottom: 1px solid rgba(255,255,255,0.2); padding: 10px 0;
color: white; outline: none; transition: border-color 0.3s;
}
.input-group label {
position: absolute; top: 10px; left: 0; color: rgba(255,255,255,0.5);
pointer-events: none; transition: 0.3s ease all;
}
.input-group input:focus { border-bottom-color: #007bff; }
.input-group input:focus ~ label, .input-group input:not(:placeholder-shown) ~ label {
top: -12px; font-size: 0.75rem; color: #007bff;
}
/* Noise */
.noise-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none; z-index: 50; opacity: 0.04;
background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.65%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22/%3E%3C/svg%3E');
mix-blend-mode: overlay;
}
/* Custom Motion Animations for Gallery */
@keyframes slide-right { 0% { transform: translateX(-20%); } 100% { transform: translateX(0%); } }
@keyframes slide-left { 0% { transform: translateX(0%); } 100% { transform: translateX(-20%); } }
@keyframes pulse-soft { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.motion-banner-anim { animation: slide-right 4s ease-in-out infinite alternate; }
.motion-banner-anim-rev { animation: slide-left 5s ease-in-out infinite alternate; }
.gallery-card-hover:hover .gallery-overlay { opacity: 1; }
.gallery-card-hover:hover .gallery-img { transform: scale(1.05); }
/* Filtering Transitions */
.gallery-item {
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-item.hidden-item {
display: none;
}
.gallery-item.fading-out {
opacity: 0;
transform: scale(0.95);
}


        /* Scroll fixes for offline viewing */
        html, body {
            overflow: auto !important;
            overflow-x: hidden !important;
            height: auto !important;
            min-height: 100% !important;
            scroll-behavior: auto !important;
            opacity: 1 !important;
            visibility: visible !important;
        }
        
        /* Force visibility - many sites use JS animations for initial display */
        body, .wrapper, main, #__next, #app, .page, .content {
            opacity: 1 !important;
            visibility: visible !important;
            transform: none !important;
        }
        
        /* Disable loader/preloader overlays */
        .loader, .preloader, .loading, [class*="loader"], [class*="preloader"] {
            display: none !important;
            opacity: 0 !important;
        }
        
        /* Show elements that might be hidden for animation */
        .word-inner, .char, .line, [data-aos], [data-scroll],
        .hero-text span, .hero-fade, [class*="hero"] span {
            opacity: 1 !important;
            transform: none !important;
            visibility: visible !important;
        }
        
        /* Reset Tailwind animation utility classes */
        .translate-y-full, .translate-x-full, .-translate-y-full, .-translate-x-full,
        .translate-y-1\/2, .-translate-y-1\/2, .translate-y-\[100\%\], .translate-y-\[110\%\] {
            transform: none !important;
        }
        
        /* Force visibility on common hidden-for-animation patterns */
        .opacity-0, [class*="opacity-0"] {
            opacity: 1 !important;
        }
        
        /* Reset scale transforms used for animations */
        .scale-0, .scale-50, .scale-75 {
            transform: none !important;
        }
        
        html.lenis, html.lenis-smooth, 
        body.lenis, body.lenis-smooth,
        .lenis-wrapper, .lenis-content,
        [data-lenis-prevent], [data-scroll-container] {
            overflow: visible !important;
            height: auto !important;
        }
        
        /* Fix flex containers that might cut off content */
        body.flex.items-center,
        body.flex.justify-center {
            align-items: flex-start !important;
            min-height: 100vh;
            height: auto !important;
        }
        
        /* Ensure main content scrolls */
        main, #__next, #__nuxt, #app, .main-content {
            overflow: visible !important;
            height: auto !important;
        }
        

::-webkit-scrollbar { width: 0px; }
/* Gradient Button Animation */
.button-custom {
cursor: pointer;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: all 0.25s ease;
background: radial-gradient(65.28% 65.28% at 50% 100%, rgba(251, 191, 36, 0.8) 0%, rgba(251, 191, 36, 0) 100%), linear-gradient(0deg, #ea580c, #ea580c);
border-radius: 9999px;
border: none;
padding: 10px 24px;
min-height: 44px;
}
.button-custom::before {
content: "";
position: absolute;
inset: 1px;
background: linear-gradient(177.95deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
border-radius: 9999px;
transition: all 0.5s ease-in-out;
z-index: 0;
}
.button-custom::after {
content: "";
position: absolute;
inset: 2px;
background: radial-gradient(65.28% 65.28% at 50% 100%, rgba(251, 191, 36, 0.8) 0%, rgba(251, 191, 36, 0) 100%), linear-gradient(0deg, #ea580c, #ea580c);
border-radius: 9999px;
transition: all 0.5s ease-in-out;
z-index: 0;
}
.button-custom:hover .inner svg.icon { transform: translateX(2px); }
.inner { z-index: 2; gap: 6px; position: relative; width: 100%; color: white; display: inline-flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 500; }
.inner svg.icon { width: 16px; height: 16px; transition: transform 0.3s ease; stroke: white; fill: none; }
/* Particle Animation inside Button */
.points_wrapper { overflow: hidden; width: 100%; height: 100%; pointer-events: none; position: absolute; z-index: 1; }
.points_wrapper .point { bottom: -10px; position: absolute; animation: floating-points infinite ease-in-out; pointer-events: none; width: 2px; height: 2px; background-color: #fff; border-radius: 9999px; }
@keyframes floating-points { 0% { transform: translateY(0); } 85% { opacity: 0; } 100% { transform: translateY(-55px); opacity: 0; } }
.points_wrapper .point:nth-child(1) { left: 10%; opacity: 1; animation-duration: 2.35s; animation-delay: 0.2s; }
.points_wrapper .point:nth-child(2) { left: 30%; opacity: 0.7; animation-duration: 2.5s; animation-delay: 0.5s; }
.points_wrapper .point:nth-child(3) { left: 25%; opacity: 0.8; animation-duration: 2.2s; animation-delay: 0.1s; }
.points_wrapper .point:nth-child(4) { left: 44%; opacity: 0.6; animation-duration: 2.05s; }
.points_wrapper .point:nth-child(5) { left: 50%; opacity: 1; animation-duration: 1.9s; }
.points_wrapper .point:nth-child(6) { left: 75%; opacity: 0.5; animation-duration: 1.5s; animation-delay: 1.5s; }
.points_wrapper .point:nth-child(7) { left: 88%; opacity: 0.9; animation-duration: 2.2s; animation-delay: 0.2s; }
/* Falling Beams Animation */
@keyframes beam-fall {
0% { transform: translateY(-100%); opacity: 0; }
5% { opacity: 0.5; }
50% { opacity: 1; }
95% { opacity: 0.5; }
100% { transform: translateY(120vh); opacity: 0; }
}
.animate-beam-1 { animation: beam-fall 6s linear infinite; animation-delay: 0s; }
.animate-beam-2 { animation: beam-fall 8s linear infinite; animation-delay: 2s; }
.animate-beam-3 { animation: beam-fall 7s linear infinite; animation-delay: 4s; }
/* Card Stack Transitions */
.card-stack-item {
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease, z-index 0s;
}


@keyframes fadeSlideIn { 0% { opacity: 0; transform: translateY(30px); filter: blur(8px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0px); } } .animate-on-scroll { animation-play-state: paused !important; } .animate-on-scroll.animate { animation-play-state: running !important; }


.font-instrument-serif { font-family: 'Instrument Serif', serif !important; }


.font-instrument-serif { font-family: 'Instrument Serif', serif !important; }


[style*="--border-gradient"]::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: var(--border-radius-before, inherit);
-webkit-mask: linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
background: var(--border-gradient);
pointer-events: none;
}


/* 3D Transform utilities */
.perspective-none { perspective: none !important; }
.perspective-dramatic { perspective: 100px !important; }
.perspective-near { perspective: 300px !important; }
.perspective-normal { perspective: 500px !important; }
.perspective-midrange { perspective: 800px !important; }
.perspective-distant { perspective: 1200px !important; }
.transform-style-preserve-3d { transform-style: preserve-3d !important; }
.transform-style-flat { transform-style: flat !important; }


body, * {
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
}

nav a, nav .cursor-pointer { cursor: pointer !important; }