/* ============================================================
TIRTHESH JAIN PORTFOLIO — PREMIUM CSS
============================================================ */
/* === FONTS === */
/* REMOVED @import — fonts loaded via in HTML for non-render-blocking performance */
/* Inter: loaded via Google Fonts in */
/* Satoshi: loaded via Fontshare in */
/* === CSS VARIABLES === */
:root {
--bg: #050505;
--bg-1: #0a0a0a;
--bg-2: #111111;
--bg-3: #1a1a1a;
--primary: #2563EB;
--primary-light: #3b82f6;
--primary-dark: #1d4ed8;
--secondary: #FBBF24;
--text: #FFFFFF;
--text-muted: #888888;
--text-subtle: #555555;
--border: rgba(255,255,255,0.06);
--border-hover: rgba(255,255,255,0.12);
--glass-bg: rgba(255,255,255,0.03);
--glass-border: rgba(255,255,255,0.07);
--shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
--shadow-md: 0 8px 32px rgba(0,0,0,0.5);
--shadow-lg: 0 24px 64px rgba(0,0,0,0.6);
--shadow-glow: 0 0 40px rgba(37,99,235,0.15);
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
--font-heading: 'Satoshi', 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;
--nav-h: 72px;
}
/* === RESET & BASE === */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
scroll-padding-top: var(--nav-h);
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
width: 100%;
}
body {
background-color: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
overflow-x: hidden;
width: 100%;
position: relative;
cursor: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media (max-width: 768px) {
body, button, a {
cursor: auto !important;
}
}
::selection {
background: rgba(37,99,235,0.3);
color: var(--text);
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition);
}
img, svg {
display: block;
max-width: 100%;
height: auto;
border-radius: var(--radius-sm);
}
ul, ol {
list-style: none;
}
button {
cursor: none;
border: none;
background: none;
font-family: inherit;
}
/* === CUSTOM CURSOR === */
.cursor {
width: 12px;
height: 12px;
background: var(--primary);
border-radius: 50%;
position: fixed;
top: 0; left: 0;
pointer-events: none;
z-index: 10000;
transform: translate(-50%, -50%);
transition: width 0.2s, height 0.2s, background 0.2s;
mix-blend-mode: difference;
}
.cursor-follower {
width: 40px;
height: 40px;
border: 1px solid rgba(37,99,235,0.5);
border-radius: 50%;
position: fixed;
top: 0; left: 0;
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
transition: all 0.12s ease;
}
@media (max-width: 768px) {
.cursor, .cursor-follower {
display: none !important;
}
}
body:has(a:hover) .cursor,
body:has(button:hover) .cursor {
width: 20px;
height: 20px;
background: var(--secondary);
}
/* === LOADER === */
.loader {
position: fixed;
inset: 0;
background: var(--bg);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.loader.hidden {
opacity: 0;
visibility: hidden;
}
.loader-inner {
text-align: center;
}
.loader-logo {
font-family: var(--font-heading);
font-size: 48px;
font-weight: 900;
color: var(--primary);
letter-spacing: -2px;
margin-bottom: 24px;
animation: logoPulse 1s ease infinite alternate;
}
@keyframes logoPulse {
from { opacity: 0.6; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
.loader-bar {
width: 200px;
height: 2px;
background: rgba(255,255,255,0.08);
border-radius: 2px;
overflow: hidden;
margin: 0 auto;
}
.loader-fill {
height: 100%;
background: var(--primary);
border-radius: 2px;
animation: loaderFill 0.4s ease forwards;
}
@keyframes loaderFill {
from { width: 0; }
to { width: 100%; }
}
/* === CONTAINER === */
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
}
@media (max-width: 768px) {
.container { padding: 0 20px; }
}
/* === NAVIGATION === */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--nav-h);
z-index: 1000;
transition: background var(--transition), backdrop-filter var(--transition), border-color var(--transition);
}
.nav.scrolled {
background: rgba(5,5,5,0.9);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-bottom: 1px solid var(--border);
}
.nav-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
height: 100%;
display: flex;
align-items: center;
gap: 32px;
}
.nav-logo {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.logo-mark {
width: 36px;
height: 36px;
background: var(--primary);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-weight: 800;
font-size: 14px;
letter-spacing: -0.5px;
flex-shrink: 0;
}
.logo-text {
font-family: var(--font-heading);
font-weight: 600;
font-size: 15px;
letter-spacing: -0.3px;
}
.nav-links {
display: flex;
align-items: center;
gap: 4px;
margin-left: auto;
}
.nav-link {
font-size: 13.5px;
font-weight: 500;
color: var(--text-muted);
padding: 6px 12px;
border-radius: 6px;
letter-spacing: 0.1px;
transition: var(--transition);
}
.nav-link:hover,
.nav-link.active {
color: var(--text);
background: rgba(255,255,255,0.05);
}
.nav-cta {
margin-left: 8px;
flex-shrink: 0;
}
.nav-hamburger {
display: none;
flex-direction: column;
gap: 5px;
padding: 6px;
margin-left: auto;
}
.nav-hamburger span {
display: block;
width: 22px;
height: 1.5px;
background: var(--text);
border-radius: 2px;
transition: var(--transition);
}
.nav-hamburger.active span:nth-child(1) {
transform: translateY(6.5px) rotate(45deg);
}
.nav-hamburger.active span:nth-child(2) {
opacity: 0;
}
.nav-hamburger.active span:nth-child(3) {
transform: translateY(-6.5px) rotate(-45deg);
}
@media (max-width: 1024px) {
.nav-links, .nav-cta { display: none; }
.nav-hamburger { display: flex; }
.nav-links.open {
display: flex;
flex-direction: column;
position: fixed;
top: var(--nav-h);
left: 0;
right: 0;
background: rgba(5,5,5,0.98);
backdrop-filter: blur(24px);
padding: 20px;
gap: 4px;
border-bottom: 1px solid var(--border);
}
.nav-links.open + .nav-cta {
display: flex;
}
}
/* === BUTTONS === */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-weight: 600;
font-size: 14px;
letter-spacing: 0.1px;
transition: var(--transition);
position: relative;
overflow: hidden;
cursor: none;
}
.btn::before {
content: '';
position: absolute;
inset: 0;
background: rgba(255,255,255,0);
transition: var(--transition);
}
.btn:hover::before {
background: rgba(255,255,255,0.06);
}
.btn-primary {
background: var(--primary);
color: #fff;
box-shadow: 0 4px 24px rgba(37,99,235,0.3);
}
.btn-primary:hover {
background: var(--primary-light);
box-shadow: 0 8px 32px rgba(37,99,235,0.45);
transform: translateY(-1px);
}
.btn-secondary {
background: rgba(255,255,255,0.06);
color: var(--text);
border: 1px solid var(--border);
}
.btn-secondary:hover {
background: rgba(255,255,255,0.1);
border-color: var(--border-hover);
transform: translateY(-1px);
}
.btn-ghost {
background: transparent;
color: var(--text-muted);
border: 1px solid transparent;
}
.btn-ghost:hover {
color: var(--text);
border-color: var(--border);
}
.btn-sm {
padding: 8px 16px;
font-size: 13px;
}
/* === MAGNETIC BUTTON === */
.magnetic-btn {
position: relative;
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow var(--transition);
will-change: transform;
overflow: hidden;
}
.magnetic-btn::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%);
opacity: 0;
transition: opacity 0.3s ease;
border-radius: inherit;
pointer-events: none;
}
.magnetic-btn:hover::after {
opacity: 1;
}
.btn-primary.magnetic-btn:hover {
box-shadow: 0 12px 40px rgba(37,99,235,0.5), 0 0 0 1px rgba(37,99,235,0.3);
}
.btn-secondary.magnetic-btn:hover {
box-shadow: 0 12px 32px rgba(255,255,255,0.08);
}
.btn-full {
width: 100%;
justify-content: center;
}
.glass {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* === SECTION BASE === */
.section {
padding: 120px 0;
}
.section-header {
text-align: center;
margin-bottom: 72px;
}
.section-tag {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--primary);
background: rgba(37,99,235,0.1);
border: 1px solid rgba(37,99,235,0.2);
padding: 4px 14px;
border-radius: 100px;
margin-bottom: 20px;
}
.section-title {
font-family: var(--font-heading);
font-size: clamp(32px, 4vw, 52px);
font-weight: 800;
letter-spacing: -1.5px;
line-height: 1.1;
margin-bottom: 16px;
}
.section-subtitle {
font-size: 17px;
color: var(--text-muted);
max-width: 560px;
margin: 0 auto;
line-height: 1.7;
}
/* === GRADIENT TEXT === */
.gradient-text {
background: linear-gradient(135deg, var(--primary) 0%, #60a5fa 50%, var(--secondary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* === REVEAL ANIMATIONS === */
.reveal-up,
.reveal-left,
.reveal-right {
opacity: 0;
transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-up { transform: translateY(40px); }
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible {
opacity: 1;
transform: none;
}
/* Apply stagger delays from --delay CSS var */
[style*="--delay"] {
transition-delay: var(--delay, 0s);
}
/* ============================================================
HERO SECTION
============================================================ */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding-top: var(--nav-h);
}
.hero-bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.hero-gradient-1 {
position: absolute;
width: 700px;
height: 700px;
top: -200px;
right: -200px;
background: radial-gradient(circle, rgba(37,99,235,0.12) 0%, transparent 70%);
animation: floatGrad1 8s ease-in-out infinite;
will-change: transform;
}
.hero-gradient-2 {
position: absolute;
width: 500px;
height: 500px;
bottom: -100px;
left: -100px;
background: radial-gradient(circle, rgba(251,191,36,0.07) 0%, transparent 70%);
animation: floatGrad2 10s ease-in-out infinite;
will-change: transform;
}
@keyframes floatGrad1 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-30px, 30px) scale(1.05); }
}
@keyframes floatGrad2 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(20px, -20px) scale(1.03); }
}
.hero-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}
.hero-particles {
position: absolute;
inset: 0;
overflow: hidden;
}
.particle {
position: absolute;
border-radius: 50%;
background: var(--primary);
opacity: 0;
animation: particleFloat linear infinite;
}
@keyframes particleFloat {
0% { transform: translateY(100vh) scale(0); opacity: 0; }
10% { opacity: 0.3; }
90% { opacity: 0.1; }
100% { transform: translateY(-100px) scale(1); opacity: 0; }
}
.hero-container {
position: relative;
z-index: 1;
padding-top: 60px;
padding-bottom: 60px;
}
.hero-content {
max-width: 900px;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(37,99,235,0.1);
border: 1px solid rgba(37,99,235,0.25);
padding: 6px 16px;
border-radius: 100px;
font-size: 13px;
font-weight: 500;
color: #93c5fd;
margin-bottom: 32px;
}
.badge-dot {
width: 7px;
height: 7px;
background: #22c55e;
border-radius: 50%;
animation: pulse-dot 2s ease infinite;
}
@keyframes pulse-dot {
0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
50% { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}
.hero-headline {
font-family: var(--font-heading);
font-size: clamp(40px, 6.5vw, 80px);
font-weight: 900;
letter-spacing: -3px;
line-height: 1.0;
margin-bottom: 28px;
animation-delay: 0.1s;
}
.hero-subheadline {
font-size: clamp(16px, 1.8vw, 19px);
color: var(--text-muted);
max-width: 680px;
line-height: 1.75;
margin-bottom: 48px;
animation-delay: 0.2s;
}
.hero-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 64px;
animation-delay: 0.3s;
}
/* === HERO STATS === */
.hero-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
animation-delay: 0.4s;
}
.stat-card {
padding: 24px 20px;
border-radius: var(--radius-md);
text-align: center;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--primary), transparent);
opacity: 0;
transition: var(--transition);
}
.stat-card:hover::before {
opacity: 1;
}
.stat-card:hover {
transform: translateY(-4px);
border-color: rgba(37,99,235,0.2);
box-shadow: var(--shadow-glow);
}
.stat-card.highlight-stat {
border-color: rgba(251,191,36,0.15);
}
.stat-card.highlight-stat::before {
background: linear-gradient(90deg, transparent, var(--secondary), transparent);
opacity: 1;
}
.stat-value {
font-family: var(--font-heading);
font-size: 36px;
font-weight: 900;
letter-spacing: -1.5px;
color: var(--primary);
line-height: 1;
margin-bottom: 8px;
}
.stat-card.highlight-stat .stat-value {
color: var(--secondary);
}
.stat-label {
font-size: 12px;
color: var(--text-muted);
font-weight: 500;
line-height: 1.4;
}
.hero-scroll-indicator {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
color: var(--text-subtle);
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
animation: scrollFade 2s ease infinite;
}
/* === HERO QUOTE === */
.hero-quote {
font-family: var(--font-heading);
font-size: 17px;
font-style: italic;
font-weight: 500;
color: var(--text-muted);
margin-top: -24px;
margin-bottom: 40px;
letter-spacing: 0.1px;
position: relative;
padding-left: 16px;
border-left: 2px solid rgba(37,99,235,0.4);
animation-delay: 0.35s;
max-width: 560px;
line-height: 1.6;
}
.scroll-line {
width: 1px;
height: 48px;
background: linear-gradient(to bottom, var(--text-subtle), transparent);
animation: scrollLine 2s ease infinite;
}
@keyframes scrollLine {
0%, 100% { height: 48px; opacity: 0.5; }
50% { height: 32px; opacity: 1; }
}
@keyframes scrollFade {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
/* ============================================================
ABOUT SECTION
============================================================ */
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.about-lead {
font-family: var(--font-heading);
font-size: 22px;
font-weight: 600;
line-height: 1.5;
margin-bottom: 24px;
color: var(--text);
}
.about-lead strong { color: var(--primary); }
.about-body {
font-size: 16px;
color: var(--text-muted);
line-height: 1.8;
margin-bottom: 20px;
}
.about-body strong { color: var(--text); font-weight: 600; }
.about-values {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 32px;
}
.value-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border-radius: 100px;
font-size: 13px;
font-weight: 500;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
color: var(--text-muted);
transition: var(--transition);
}
.value-chip:hover {
border-color: var(--primary);
color: var(--text);
background: rgba(37,99,235,0.05);
}
.value-chip svg { color: var(--primary); }
/* About Bento */
.about-bento {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.bento-card {
padding: 20px;
border-radius: var(--radius-md);
transition: var(--transition);
}
.bento-card:hover {
border-color: var(--border-hover);
transform: translateY(-2px);
}
.bento-icon {
font-size: 24px;
margin-bottom: 8px;
}
.bento-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--text-subtle);
font-weight: 600;
margin-bottom: 6px;
}
.bento-value {
font-family: var(--font-heading);
font-size: 15px;
font-weight: 700;
color: var(--text);
line-height: 1.3;
}
.bento-highlight {
border-color: rgba(37,99,235,0.15);
background: rgba(37,99,235,0.05);
}
.bento-highlight .bento-value { color: var(--primary); }
.bento-accent {
border-color: rgba(251,191,36,0.15);
background: rgba(251,191,36,0.04);
}
.bento-accent .bento-value { color: var(--secondary); }
.bento-wide {
grid-column: span 2;
}
.focus-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.focus-tag {
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
background: rgba(37,99,235,0.1);
border: 1px solid rgba(37,99,235,0.2);
color: #93c5fd;
}
/* ============================================================
EXPERIENCE / TIMELINE
============================================================ */
.timeline {
position: relative;
display: flex;
flex-direction: column;
gap: 0;
}
.timeline-item {
display: grid;
grid-template-columns: 40px 1fr;
gap: 24px;
position: relative;
}
.timeline-item:last-child .timeline-line {
display: none;
}
.timeline-connector {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 24px;
}
.timeline-dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--primary);
border: 2px solid var(--bg);
box-shadow: 0 0 0 4px rgba(37,99,235,0.2);
flex-shrink: 0;
z-index: 1;
}
.timeline-line {
width: 1px;
flex: 1;
background: linear-gradient(to bottom, var(--primary), transparent);
margin-top: 8px;
min-height: 60px;
}
.timeline-card {
padding: 36px;
border-radius: var(--radius-lg);
margin-bottom: 24px;
transition: var(--transition);
}
.timeline-card:hover {
border-color: rgba(37,99,235,0.2);
transform: translateY(-2px);
box-shadow: var(--shadow-glow);
}
.timeline-header {
margin-bottom: 24px;
}
.timeline-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.timeline-tag {
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--primary);
background: rgba(37,99,235,0.1);
border: 1px solid rgba(37,99,235,0.2);
padding: 3px 10px;
border-radius: 100px;
}
.timeline-period {
font-size: 12px;
color: var(--text-subtle);
font-weight: 500;
}
.timeline-company {
font-family: var(--font-heading);
font-size: 24px;
font-weight: 800;
letter-spacing: -0.5px;
margin-bottom: 6px;
}
.timeline-role {
font-size: 15px;
color: var(--text-muted);
font-weight: 500;
}
.timeline-highlight {
display: flex;
align-items: center;
gap: 8px;
background: rgba(251,191,36,0.06);
border: 1px solid rgba(251,191,36,0.15);
border-radius: var(--radius-sm);
padding: 10px 16px;
font-size: 14px;
color: var(--secondary);
margin-bottom: 20px;
}
.timeline-highlight strong { font-weight: 700; }
.timeline-responsibilities {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 24px;
}
.timeline-responsibilities li {
font-size: 15px;
color: var(--text-muted);
padding-left: 20px;
position: relative;
line-height: 1.6;
}
.timeline-responsibilities li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--primary);
opacity: 0.6;
}
.timeline-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.exp-tag {
padding: 4px 12px;
border-radius: 100px;
font-size: 12px;
font-weight: 500;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
color: var(--text-subtle);
}
/* ============================================================
CASE STUDIES
============================================================ */
.case-studies-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.cs-card {
border-radius: var(--radius-xl);
overflow: hidden;
transition: var(--transition);
position: relative;
}
.cs-card:hover {
transform: translateY(-6px);
border-color: rgba(37,99,235,0.2);
box-shadow: var(--shadow-lg), var(--shadow-glow);
}
.cs-card-featured {
border-color: rgba(251,191,36,0.15);
}
.cs-card-featured:hover {
border-color: rgba(251,191,36,0.3);
box-shadow: var(--shadow-lg), 0 0 40px rgba(251,191,36,0.1);
}
.cs-featured-badge {
position: absolute;
top: 20px;
right: 20px;
background: var(--secondary);
color: #000;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 100px;
z-index: 2;
}
.cs-header {
background: var(--bg-2);
padding: 0;
position: relative;
}
.cs-industry-badge {
position: absolute;
top: 16px;
left: 20px;
display: flex;
align-items: center;
gap: 6px;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(8px);
border: 1px solid var(--border);
padding: 5px 12px;
border-radius: 100px;
font-size: 12px;
font-weight: 600;
z-index: 2;
}
.cs-icon { font-size: 14px; }
.cs-visual {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
padding: 48px 24px 24px;
position: relative;
overflow: hidden;
}
.cs-visual-healthcare {
background: linear-gradient(135deg, rgba(37,99,235,0.05) 0%, rgba(37,99,235,0.02) 100%);
}
.cs-visual-realestate {
background: linear-gradient(135deg, rgba(168,85,247,0.05) 0%, rgba(37,99,235,0.03) 100%);
}
.cs-visual-ecommerce {
background: linear-gradient(135deg, rgba(251,191,36,0.06) 0%, rgba(37,99,235,0.04) 100%);
}
.cs-visual-seo {
background: linear-gradient(135deg, rgba(34,197,94,0.05) 0%, rgba(37,99,235,0.02) 100%);
}
.cs-chart-area {
width: 100%;
}
.cs-kpi-row {
display: flex;
gap: 12px;
margin-bottom: 16px;
justify-content: center;
}
.cs-kpi {
text-align: center;
flex: 1;
}
.cs-kpi-label {
font-size: 10px;
color: var(--text-subtle);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 4px;
font-weight: 600;
}
.cs-kpi-value {
font-family: var(--font-heading);
font-size: 16px;
font-weight: 800;
letter-spacing: -0.5px;
}
/* Bar chart visual */
.cs-bar-chart {
text-align: center;
}
.cs-bar-group {
display: flex;
align-items: flex-end;
gap: 6px;
height: 60px;
justify-content: center;
}
.cs-bar {
flex: 1;
max-width: 20px;
height: var(--h);
background: var(--c);
border-radius: 4px 4px 0 0;
animation: barGrow 1s ease forwards;
transform-origin: bottom;
transform: scaleY(0);
}
.cs-card:hover .cs-bar {
animation: barGrow 0.6s ease forwards;
}
@keyframes barGrow {
to { transform: scaleY(1); }
}
.cs-bar-label {
font-size: 10px;
color: var(--text-subtle);
margin-top: 6px;
letter-spacing: 0.5px;
}
/* Funnel visual */
.cs-funnel {
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
}
.cs-funnel-step {
display: flex;
align-items: center;
justify-content: center;
height: 22px;
border-radius: 4px;
font-size: 10px;
color: rgba(255,255,255,0.5);
font-weight: 500;
letter-spacing: 0.5px;
transition: var(--transition);
}
.cs-card:hover .cs-funnel-step {
color: rgba(255,255,255,0.8);
}
/* ROAS display */
.cs-roas-display {
text-align: center;
margin-bottom: 16px;
}
.cs-roas-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--text-subtle);
font-weight: 600;
margin-bottom: 4px;
}
.cs-roas-value {
font-family: var(--font-heading);
font-size: 48px;
font-weight: 900;
letter-spacing: -2px;
color: var(--secondary);
line-height: 1;
}
.cs-roas-value span {
font-size: 28px;
opacity: 0.7;
}
.cs-roas-sub {
font-size: 11px;
color: var(--text-subtle);
margin-top: 4px;
}
.cs-line-chart {
height: 60px;
overflow: hidden;
}
.cs-line-chart svg {
width: 100%;
height: 100%;
}
/* Dual bar chart */
.cs-dual-chart {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 4px;
}
.cs-dual-label {
font-size: 10px;
color: var(--text-subtle);
font-weight: 600;
letter-spacing: 0.5px;
}
.cs-dual-bar {
height: 8px;
border-radius: 4px;
background: var(--c);
width: 0;
transition: width 1s ease;
}
.cs-card:hover .cs-dual-bar {
width: var(--w);
}
/* Case Study Body */
.cs-body {
padding: 28px;
}
.cs-title {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 800;
letter-spacing: -0.5px;
margin-bottom: 20px;
line-height: 1.2;
}
.cs-section {
margin-bottom: 16px;
}
.cs-section-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--text-subtle);
margin-bottom: 6px;
}
.cs-section p {
font-size: 14px;
color: var(--text-muted);
line-height: 1.6;
}
.cs-strategy-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.cs-strategy-tags span {
font-size: 11px;
font-weight: 500;
padding: 3px 10px;
border-radius: 100px;
background: rgba(37,99,235,0.08);
border: 1px solid rgba(37,99,235,0.15);
color: #93c5fd;
}
.cs-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.cs-list li {
font-size: 13px;
color: var(--text-muted);
padding-left: 16px;
position: relative;
line-height: 1.5;
}
.cs-list li::before {
content: '→';
position: absolute;
left: 0;
color: var(--primary);
font-size: 11px;
}
.cs-results {
background: rgba(255,255,255,0.02);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 16px;
margin: 16px 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.cs-results-highlight {
border-color: rgba(251,191,36,0.15);
background: rgba(251,191,36,0.03);
}
.cs-result-item {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
color: var(--text-muted);
}
.cs-result-icon {
color: #22c55e;
font-weight: 700;
flex-shrink: 0;
font-size: 14px;
}
.cs-results-highlight .cs-result-item:first-child {
color: var(--text);
font-weight: 500;
}
.cs-results-highlight .cs-result-item:first-child .cs-result-icon {
color: var(--secondary);
}
.cs-learning {
background: rgba(37,99,235,0.04);
border-left: 2px solid var(--primary);
padding: 12px 16px;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.cs-learning-label {
font-size: 11px;
font-weight: 700;
color: var(--primary);
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.cs-learning p {
font-size: 13px;
color: var(--text-muted);
line-height: 1.5;
}
/* ============================================================
EXPERTISE SECTION
============================================================ */
.expertise-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.expertise-card {
padding: 28px 20px;
border-radius: var(--radius-md);
text-align: center;
transition: var(--transition);
cursor: none;
}
.expertise-card:hover {
transform: translateY(-6px);
border-color: var(--border-hover);
box-shadow: var(--shadow-md);
}
.expertise-card:hover .exp-icon-wrap {
background: rgba(from var(--icon-color) r g b / 0.15);
transform: scale(1.1);
}
.exp-icon-wrap {
width: 52px;
height: 52px;
border-radius: var(--radius-sm);
background: rgba(255,255,255,0.04);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
color: var(--icon-color, var(--primary));
transition: var(--transition);
}
.expertise-card h3 {
font-family: var(--font-heading);
font-size: 15px;
font-weight: 700;
margin-bottom: 8px;
letter-spacing: -0.3px;
}
.expertise-card p {
font-size: 12px;
color: var(--text-muted);
line-height: 1.6;
}
/* ============================================================
TOOLS SECTION
============================================================ */
.tools-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.tool-card {
padding: 24px 16px;
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
transition: var(--transition);
cursor: none;
}
.tool-card:hover {
transform: translateY(-6px);
border-color: var(--border-hover);
box-shadow: var(--shadow-md);
}
.tool-card span {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
text-align: center;
transition: var(--transition);
}
.tool-card:hover span {
color: var(--text);
}
.tool-logo {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.tool-card:hover .tool-logo {
transform: scale(1.1);
}
/* ============================================================
SKILLS SECTION
============================================================ */
.skills-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.skill-bar-item {
margin-bottom: 20px;
}
.skill-bar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.skill-bar-name {
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.skill-bar-pct {
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
}
.skill-bar-track {
height: 4px;
background: rgba(255,255,255,0.06);
border-radius: 2px;
overflow: hidden;
}
.skill-bar-fill {
height: 100%;
background: var(--bar-color, var(--primary));
border-radius: 2px;
width: 0;
transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 0 12px var(--bar-color, var(--primary));
}
.skill-bar-fill.animated {
width: calc(var(--target-width, 80) * 1%);
}
.skills-radar-wrap {
display: flex;
align-items: center;
justify-content: center;
}
.skills-radar {
max-width: 400px;
width: 100%;
}
/* ============================================================
CERTIFICATIONS
============================================================ */
.certs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.cert-card {
padding: 32px 28px;
border-radius: var(--radius-lg);
position: relative;
transition: var(--transition);
}
.cert-card:hover {
transform: translateY(-4px);
border-color: var(--border-hover);
box-shadow: var(--shadow-md);
}
.cert-card.cert-progress {
border-color: rgba(251,191,36,0.1);
}
.cert-status {
display: inline-block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
padding: 3px 10px;
border-radius: 100px;
margin-bottom: 20px;
}
.cert-earned {
background: rgba(34,197,94,0.1);
border: 1px solid rgba(34,197,94,0.2);
color: #22c55e;
}
.cert-inprogress {
background: rgba(251,191,36,0.1);
border: 1px solid rgba(251,191,36,0.2);
color: var(--secondary);
}
.cert-icon {
font-size: 32px;
margin-bottom: 16px;
display: block;
}
.cert-name {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 800;
letter-spacing: -0.4px;
margin-bottom: 6px;
}
.cert-issuer {
font-size: 13px;
color: var(--primary);
font-weight: 500;
margin-bottom: 12px;
}
.cert-desc {
font-size: 14px;
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 16px;
}
.cert-skills {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.cert-skills span {
font-size: 11px;
font-weight: 500;
padding: 3px 10px;
border-radius: 100px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
color: var(--text-subtle);
}
.cert-progress-bar {
height: 4px;
background: rgba(255,255,255,0.06);
border-radius: 2px;
overflow: hidden;
margin-bottom: 8px;
}
.cert-progress-fill {
height: 100%;
background: var(--secondary);
border-radius: 2px;
width: 0;
transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 0 8px rgba(251,191,36,0.4);
}
.cert-progress-fill.animated {
width: var(--progress);
}
.cert-progress-label {
font-size: 12px;
color: var(--secondary);
font-weight: 500;
}
/* ============================================================
TESTIMONIALS
============================================================ */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.testimonial-card {
padding: 32px;
border-radius: var(--radius-lg);
transition: var(--transition);
}
.testimonial-card:hover {
transform: translateY(-4px);
border-color: rgba(37,99,235,0.15);
box-shadow: var(--shadow-glow);
}
.testimonial-stars {
color: var(--secondary);
font-size: 16px;
letter-spacing: 2px;
margin-bottom: 20px;
}
.testimonial-text {
font-size: 15px;
color: var(--text-muted);
line-height: 1.8;
margin-bottom: 24px;
font-style: italic;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 12px;
}
.testimonial-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
flex-shrink: 0;
}
.testimonial-name {
font-size: 14px;
font-weight: 700;
margin-bottom: 2px;
}
.testimonial-title {
font-size: 12px;
color: var(--text-subtle);
}
/* ============================================================
CONTACT SECTION
============================================================ */
.contact {
background: var(--bg-1);
border-top: 1px solid var(--border);
}
.contact-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.contact-headline {
font-family: var(--font-heading);
font-size: clamp(28px, 3.5vw, 44px);
font-weight: 900;
letter-spacing: -1.5px;
line-height: 1.1;
margin: 20px 0 12px;
}
.contact-sub {
font-size: 20px;
font-weight: 700;
color: var(--primary);
font-family: var(--font-heading);
margin-bottom: 40px;
}
.contact-details {
display: flex;
flex-direction: column;
gap: 16px;
}
.contact-item {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
border-radius: var(--radius-md);
border: 1px solid var(--border);
transition: var(--transition);
}
.contact-item:hover {
border-color: rgba(37,99,235,0.2);
background: rgba(37,99,235,0.04);
transform: translateX(4px);
}
.contact-item-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
background: rgba(37,99,235,0.1);
border: 1px solid rgba(37,99,235,0.15);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
flex-shrink: 0;
}
.contact-item-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.contact-item-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--text-subtle);
font-weight: 600;
}
.contact-item-value {
font-size: 14px;
font-weight: 500;
color: var(--text);
}
/* Contact Form */
.contact-form {
padding: 40px;
border-radius: var(--radius-xl);
}
.form-title {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 800;
letter-spacing: -0.4px;
margin-bottom: 28px;
}
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 8px;
letter-spacing: 0.1px;
}
.form-input,
.form-select,
.form-textarea {
width: 100%;
background: rgba(255,255,255,0.03);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
font-family: var(--font-body);
font-size: 14px;
padding: 12px 16px;
transition: var(--transition);
outline: none;
-webkit-appearance: none;
}
.form-input::placeholder,
.form-textarea::placeholder {
color: var(--text-subtle);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
border-color: var(--primary);
background: rgba(37,99,235,0.04);
box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.form-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
cursor: pointer;
}
.form-select option {
background: var(--bg-2);
color: var(--text);
}
.form-textarea {
resize: vertical;
min-height: 100px;
}
/* Hidden by default — JS removes the [hidden] attribute to show */
.form-success[hidden],
.form-error[hidden] {
display: none !important;
}
.form-success,
.form-error {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 500;
margin-top: 12px;
}
.form-success {
background: rgba(34,197,94,0.08);
border: 1px solid rgba(34,197,94,0.2);
color: #22c55e;
}
.form-error {
background: rgba(239,68,68,0.08);
border: 1px solid rgba(239,68,68,0.2);
color: #ef4444;
}
/* ============================================================
FOOTER
============================================================ */
.footer {
background: var(--bg);
border-top: 1px solid var(--border);
padding: 60px 0 0;
}
.footer-inner {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 40px;
align-items: start;
padding-bottom: 48px;
}
.footer-logo {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-heading);
font-weight: 700;
font-size: 16px;
margin-bottom: 12px;
}
.footer-tagline {
font-size: 13px;
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 8px;
}
.footer-location {
font-size: 12px;
color: var(--text-subtle);
}
.footer-nav {
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-nav li a {
font-size: 14px;
color: var(--text-muted);
transition: var(--transition);
}
.footer-nav li a:hover {
color: var(--text);
}
.footer-right {
display: flex;
gap: 12px;
justify-content: flex-end;
}
.footer-social {
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
transition: var(--transition);
}
.footer-social:hover {
border-color: var(--primary);
color: var(--primary);
background: rgba(37,99,235,0.08);
transform: translateY(-2px);
}
.footer-bottom {
border-top: 1px solid var(--border);
padding: 20px 40px;
text-align: center;
max-width: 1280px;
margin: 0 auto;
}
.footer-bottom p {
font-size: 13px;
color: var(--text-subtle);
}
/* ============================================================
BACK TO TOP
============================================================ */
.back-to-top {
position: fixed;
bottom: 32px;
right: 32px;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--primary);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
z-index: 500;
opacity: 0;
transform: translateY(16px);
transition: var(--transition);
box-shadow: 0 8px 24px rgba(37,99,235,0.4);
}
.back-to-top.visible {
opacity: 1;
transform: translateY(0);
}
.back-to-top:hover {
background: var(--primary-light);
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(37,99,235,0.5);
}
/* ============================================================
RESPONSIVE — TABLET
============================================================ */
@media (max-width: 1024px) {
.section { padding: 80px 0; }
.hero-stats {
grid-template-columns: repeat(2, 1fr);
}
.about-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.about-bento {
grid-template-columns: repeat(3, 1fr);
}
.bento-wide { grid-column: span 3; }
.case-studies-grid {
grid-template-columns: 1fr;
}
.expertise-grid {
grid-template-columns: repeat(3, 1fr);
}
.tools-grid {
grid-template-columns: repeat(4, 1fr);
}
.skills-layout {
grid-template-columns: 1fr;
gap: 48px;
}
.skills-radar-wrap {
display: none;
}
.certs-grid {
grid-template-columns: repeat(2, 1fr);
}
.testimonials-grid {
grid-template-columns: 1fr;
}
.contact-inner {
grid-template-columns: 1fr;
gap: 48px;
}
.footer-inner {
grid-template-columns: 1fr 1fr;
}
.footer-right {
justify-content: flex-start;
grid-column: span 2;
}
}
@media (max-width: 768px) {
:root { --nav-h: 64px; }
.nav-inner { padding: 0 20px; }
.hero-headline { letter-spacing: -2px; }
.hero-actions { flex-direction: column; }
.hero-actions .btn { justify-content: center; }
.hero-stats {
grid-template-columns: repeat(2, 1fr);
}
.stat-value { font-size: 28px; }
.expertise-grid {
grid-template-columns: repeat(2, 1fr);
}
.tools-grid {
grid-template-columns: repeat(3, 1fr);
}
.timeline-item {
grid-template-columns: 24px 1fr;
gap: 16px;
}
.timeline-card { padding: 24px 20px; }
.timeline-company { font-size: 20px; }
.about-bento {
grid-template-columns: 1fr 1fr;
}
.bento-wide { grid-column: span 2; }
.certs-grid { grid-template-columns: 1fr; }
.contact-form { padding: 28px 20px; }
.footer-inner {
grid-template-columns: 1fr;
}
.footer-right { grid-column: 1; }
.footer-bottom { padding: 20px; }
.back-to-top { right: 16px; bottom: 16px; }
}
@media (max-width: 480px) {
.expertise-grid {
grid-template-columns: 1fr 1fr;
}
.tools-grid {
grid-template-columns: repeat(2, 1fr);
}
.hero-stats {
grid-template-columns: 1fr 1fr;
gap: 8px;
}
}
/* ============================================================
ACCESSIBILITY
============================================================ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
html { scroll-behavior: auto; }
.cursor, .cursor-follower { display: none; }
}
:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 3px;
border-radius: 4px;
}
/* Fix cursor on touch devices */
@media (hover: none) {
body { cursor: auto; }
.cursor, .cursor-follower { display: none; }
.btn, button { cursor: pointer; }
}