/* ==========================================================================
   WareMax — Corporate Website CSS
   Interactive 3D Style | All Pages
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700;800&display=swap');

/* === DESIGN TOKENS === */
:root {
  --primary: #059669;
  --primary-light: #10b981;
  --primary-dark: #047857;
  --primary-tint: rgba(5,150,105,0.08);
  --primary-glow: rgba(5,150,105,0.3);
  --accent: #C2FD75;
  --teal: #14b8a6;
  --teal-light: #2dd4bf;
  --cyan: #10b981;
  --cyan-glow: rgba(16,185,129,0.25);
  --green: #10b981;
  --amber: #f59e0b;
  --blue: #059669;
  --purple: #7c3aed;
  --red: #ef4444;
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50: #f8fafc;
  --white: #ffffff;
  --dark: #0a0a1a;
  --dark-2: #111128;
  --dark-3: #1a1a2e;
  --dark-surface: #111128;
  --surface: #16162a;
  --surface-light: #1e1e38;
  --text: #e2e8f0;
  --text-dim: #64748b;
  --text-muted: #94a3b8;
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --gradient-primary: linear-gradient(135deg, #10b981, #059669);
  --gradient-accent: linear-gradient(135deg, #059669, #047857);
  --gradient-teal: linear-gradient(135deg, #14b8a6, #059669);
  --gradient-dark: linear-gradient(180deg, #0a0a1a 0%, #111128 50%, #1a1a2e 100%);
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.3);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 30px rgba(5,150,105,0.15);
}

/* === RESET === */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font-main); color:var(--text); background:var(--dark); line-height:1.7; overflow-x:hidden; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; }
button,input,select,textarea { font-family:inherit; font-size:inherit; }
::selection { background:var(--primary); color:var(--white); }
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:var(--dark); }
::-webkit-scrollbar-thumb { background:var(--surface-light); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-dim); }

/* === LAYOUT === */
.container { max-width:1280px; margin:0 auto; padding:0 2rem; width:100%; }
.text-center { text-align:center; }
.mx-auto { margin-left:auto; margin-right:auto; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-lg); }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-lg); }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-lg); }
.split-layout { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3xl); align-items:center; }
.perspective-container { perspective:1000px; }

/* === ANIMATIONS === */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes float-subtle { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-8px) rotate(2deg)} }
@keyframes pulse-glow { 0%,100%{opacity:0.6} 50%{opacity:1} }
@keyframes rotate-slow { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes gradient-shift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
@keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes count-up { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes morph { 0%,100%{border-radius:40% 60% 70% 30%/40% 50% 60% 50%} 50%{border-radius:60% 40% 30% 70%/50% 60% 40% 60%} }
.floating { animation:float 6s ease-in-out infinite; }
.floating-delay-1 { animation-delay:1s; }
.floating-delay-2 { animation-delay:2s; }

/* === SCROLL PROGRESS === */
.scroll-progress, .scroll-progress-bar {
  position:fixed; top:0; left:0; width:0; height:3px;
  background:linear-gradient(90deg,#10b981,#059669,#047857);
  z-index:9999; border-radius:0 2px 2px 0;
  box-shadow:0 0 8px rgba(5,150,105,0.4);
  transition:width 0.1s;
}

/* === LOADING SCREEN === */
.loading-screen, .loading-overlay {
  position:fixed; inset:0; z-index:99999;
  background:var(--dark);
  display:flex; align-items:center; justify-content:center;
  transition:opacity 0.5s ease, visibility 0.5s ease;
}
.loading-screen.hidden, .loading-overlay.hidden { opacity:0; visibility:hidden; pointer-events:none; }
body.loaded .loading-overlay { opacity:0; visibility:hidden; pointer-events:none; }
.loader, .loader-content { text-align:center; }
.loader-logo {
  font-family:var(--font-mono); font-size:2rem; font-weight:800;
  background:var(--gradient-primary); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; margin-bottom:1.5rem;
}
.loader-bar { width:120px; height:3px; background:var(--surface-light); border-radius:3px; overflow:hidden; margin:20px auto 0; }
.loader-progress, .loader-bar-inner { height:100%; width:40%; background:var(--gradient-primary); border-radius:3px; animation:loaderSlide 1.2s ease-in-out infinite; }
@keyframes loaderSlide { 0%{transform:translateX(-100%)} 100%{transform:translateX(350%)} }
.spinner { width:48px; height:48px; border:3px solid var(--surface-light); border-top-color:var(--primary); border-radius:50%; animation:spin 0.8s linear infinite; margin:0 auto; }

/* === HEADER === */
header, .header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:20px 0; transition:var(--transition);
}
header.header-scrolled, .header.scrolled {
  background:rgba(10,10,26,0.85); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,0.05); padding:12px 0;
  box-shadow:0 4px 30px rgba(0,0,0,0.3);
}
.header-inner { max-width:1280px; margin:0 auto; padding:0 32px; display:flex; align-items:center; justify-content:space-between; }
.logo {
  font-family:var(--font-mono); font-size:1.5rem; font-weight:800;
  text-decoration:none; display:flex; align-items:center; gap:10px;
}
.logo-icon {
  width:36px; height:36px; border-radius:var(--radius-sm);
  background:var(--gradient-primary);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:800; font-size:1rem; color:var(--white);
}
.logo-text {
  font-weight:700; color:var(--white);
  background:var(--gradient-primary); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.logo-dot { color:var(--accent); -webkit-text-fill-color:var(--accent); }
.nav, .nav-links { display:flex; align-items:center; gap:32px; list-style:none; }
.nav-link, .nav-links a {
  font-size:0.9rem; font-weight:500; color:var(--text-muted);
  transition:var(--transition); position:relative; padding:0.25rem 0; text-decoration:none;
}
.nav-link::after, .nav-links a.active::after {
  content:''; position:absolute; bottom:-6px; left:0; right:0; width:0; height:2px;
  background:var(--gradient-primary); border-radius:2px; transition:var(--transition);
}
.nav-link:hover, .nav-link.active, .nav-links a:hover, .nav-links a.active { color:var(--white); }
.nav-link:hover::after, .nav-link.active::after, .nav-links a.active::after { width:100%; right:auto; }
.btn-header, .header-cta, .nav-cta {
  background:var(--gradient-primary) !important; color:var(--white) !important;
  padding:10px 24px !important; border-radius:50px !important;
  font-weight:600 !important; font-size:0.8125rem !important; transition:var(--transition) !important;
  box-shadow:0 4px 15px rgba(5,150,105,0.3); text-decoration:none; border:none; cursor:pointer;
}
.btn-header:hover, .header-cta:hover, .nav-cta:hover { transform:translateY(-2px); box-shadow:0 6px 25px rgba(5,150,105,0.4); }

/* === HAMBURGER === */
.hamburger, .mobile-toggle {
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; z-index:1001;
}
.hamburger span, .mobile-toggle span {
  display:block; width:24px; height:2px; background:var(--white); border-radius:2px; transition:var(--transition);
}
body.mobile-nav-open .hamburger span:nth-child(1), .hamburger.active span:nth-child(1), .mobile-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
body.mobile-nav-open .hamburger span:nth-child(2), .hamburger.active span:nth-child(2), .mobile-toggle.active span:nth-child(2) { opacity:0; }
body.mobile-nav-open .hamburger span:nth-child(3), .hamburger.active span:nth-child(3), .mobile-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* === MOBILE NAV === */
.mobile-nav-overlay, .nav-overlay {
  position:fixed; inset:0; z-index:998;
  background:rgba(10,10,26,0.95); backdrop-filter:blur(20px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
  opacity:0; visibility:hidden; transition:var(--transition);
}
.mobile-nav-overlay.active, .nav-overlay.active { opacity:1; visibility:visible; }
body.mobile-nav-open .nav-overlay { opacity:1; visibility:visible; }
.mobile-nav-content, .mobile-nav {
  display:flex; flex-direction:column; align-items:center; gap:24px; list-style:none;
}
.mobile-nav-link, .mobile-nav a {
  font-size:1.5rem; font-weight:600; color:var(--text-muted); transition:var(--transition); text-decoration:none;
}
.mobile-nav-link:hover, .mobile-nav-link.active, .mobile-nav a:hover, .mobile-nav a.active { color:var(--primary-light); }

/* === BUTTONS === */
.btn-primary {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.875rem 2rem; border-radius:50px;
  background:var(--gradient-primary);
  color:var(--white); font-weight:600; font-size:0.9375rem;
  border:none; cursor:pointer; transition:var(--transition);
  box-shadow:0 4px 20px rgba(5,150,105,0.3);
  text-decoration:none; white-space:nowrap;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(5,150,105,0.4); }
.btn-ghost, .btn-outline {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.875rem 2rem; border-radius:50px;
  background:transparent; color:var(--white); font-weight:500;
  border:1px solid rgba(255,255,255,0.2); cursor:pointer; transition:var(--transition);
  text-decoration:none;
}
.btn-ghost:hover, .btn-outline:hover { border-color:var(--white); background:rgba(255,255,255,0.05); transform:translateY(-2px); }
.btn-secondary {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.875rem 2rem; border-radius:50px;
  background:rgba(255,255,255,0.05); color:var(--white); font-weight:600;
  border:1px solid rgba(255,255,255,0.1); cursor:pointer; transition:var(--transition);
}
.btn-secondary:hover { border-color:rgba(255,255,255,0.2); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-group { display:flex; gap:1rem; flex-wrap:wrap; }

/* === SECTIONS === */
.section { padding:6rem 0; position:relative; }
.section-dark { background:var(--dark); color:var(--white); }
.section-light { background:var(--dark-2); color:var(--white); }
.section-teal { background:var(--dark-3); }
.section-gradient { background:var(--gradient-dark); color:var(--white); }
.section-white { background:var(--dark-2); }
.section-header { margin-bottom:var(--space-3xl); }
.section-header.centered { text-align:center; max-width:700px; margin-left:auto; margin-right:auto; margin-bottom:var(--space-3xl); }
.section-header p { color:var(--text-muted); margin-top:var(--space-md); font-size:1.0625rem; line-height:1.7; }
.section-label {
  font-family:var(--font-mono); font-size:0.75rem; font-weight:600;
  letter-spacing:3px; text-transform:uppercase;
  background:var(--gradient-primary); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  display:inline-flex; align-items:center; gap:12px; margin-bottom:16px;
}
.section-label::before {
  content:''; display:block; width:30px; height:2px;
  background:var(--gradient-primary); border-radius:2px;
}
.section-title { font-size:clamp(2rem,4vw,3rem); font-weight:800; line-height:1.2; letter-spacing:-0.02em; color:var(--white); margin-bottom:20px; }
.section-subtitle { color:var(--text-muted); font-size:1.1rem; margin-top:var(--space-md); line-height:1.8; max-width:650px; }
.section-number { font-family:var(--font-mono); font-size:5rem; font-weight:800; color:rgba(5,150,105,0.06); position:absolute; top:-1rem; right:0; }
h2 { font-size:2.5rem; font-weight:800; line-height:1.15; letter-spacing:-0.02em; color:var(--white); }
h3 { font-size:1.5rem; font-weight:700; line-height:1.3; color:var(--white); }
h4 { font-size:1.125rem; font-weight:600; line-height:1.4; color:var(--white); }
.breadcrumb { display:flex; gap:0.5rem; font-size:0.875rem; color:var(--text-muted); margin-top:var(--space-lg); }
.breadcrumb a { color:var(--primary-light); }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb .sep { color:var(--text-dim); }

/* === HERO === */
.hero, .services-hero, .hero-story {
  position:relative; min-height:90vh; display:flex; align-items:center;
  background:linear-gradient(180deg,var(--dark) 0%,var(--dark-2) 60%,var(--dark-3) 100%);
  overflow:hidden; padding-top:100px;
}
.hero.hero-sm { min-height:50vh; }
.hero-inner { position:relative; z-index:5; width:100%; padding:4rem 0; }
.hero-content { max-width:720px; }
.hero h1 { font-size:3.75rem; font-weight:800; color:var(--white); line-height:1.05; letter-spacing:-0.03em; }
.hero p, .hero-sub { font-size:1.125rem; color:var(--text-muted); line-height:1.7; margin-top:var(--space-lg); max-width:580px; }
.hero-grid {
  position:absolute; inset:0; z-index:1;
  background-image:
    linear-gradient(rgba(5,150,105,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(5,150,105,0.03) 1px,transparent 1px);
  background-size:60px 60px;
}
.glow-orb {
  position:absolute; border-radius:50%; filter:blur(80px); z-index:2; pointer-events:none;
}
.glow-orb-1 { top:-10%; right:-5%; background:radial-gradient(circle,rgba(16,185,129,0.15),transparent 70%); }
.glow-orb-2 { bottom:-10%; left:-5%; background:radial-gradient(circle,rgba(5,150,105,0.2),transparent 70%); }
.glow-orb-3 { top:50%; left:50%; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(124,58,237,0.08),transparent 70%); }
.hex-shape, .hex-deco {
  position:absolute; z-index:3; opacity:0.15;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  animation:float-subtle 8s ease-in-out infinite;
}
.hex-1 { width:120px; height:120px; top:15%; right:10%; background:var(--primary); animation-delay:0s; }
.hex-2 { width:80px; height:80px; bottom:20%; left:8%; background:var(--primary-light); animation-delay:2s; }
.hex-3 { width:60px; height:60px; top:60%; right:25%; background:var(--primary); animation-delay:4s; opacity:0.1; }
.hero-deco { position:absolute; z-index:2; opacity:0.2; border-radius:50%; }
.hero-deco-1 { width:100px; height:100px; top:20%; right:15%; border:2px solid var(--primary-light); animation:float 6s ease-in-out infinite; }
.hero-deco-2 { width:60px; height:60px; bottom:25%; left:10%; background:var(--primary); transform:rotate(45deg); animation:float-subtle 8s ease-in-out infinite 1s; border-radius:8px; }
.hero-deco-3 { width:12px; height:12px; top:40%; left:20%; background:var(--primary-light); animation:pulse-glow 3s ease-in-out infinite; }

/* === HERO METRICS (floating cards) === */
.hero-metrics {
  display:flex; gap:1rem; margin-top:var(--space-2xl); flex-wrap:wrap;
}
.metric-float {
  background:rgba(255,255,255,0.05); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius);
  padding:1rem 1.25rem; animation:float 6s ease-in-out infinite;
}
.metric-float:nth-child(2) { animation-delay:1s; }
.metric-float:nth-child(3) { animation-delay:2s; }
.metric-float h3 { font-family:var(--font-mono); font-size:1.5rem; font-weight:800; color:var(--primary-light); }
.metric-float span { font-size:0.75rem; color:var(--text-muted); margin-top:2px; display:block; }

/* === TRUST BAR === */
.trust-bar {
  padding:2rem 0; border-top:1px solid rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.05);
  background:rgba(10,10,26,0.5);
}
.trust-bar .container { text-align:center; }
.trust-bar p { font-size:0.8125rem; color:var(--text-dim); margin-bottom:1.25rem; font-weight:500; }
.trust-logos { display:flex; justify-content:center; gap:2.5rem; flex-wrap:wrap; align-items:center; }
.trust-logo {
  font-family:var(--font-mono); font-size:0.8125rem; font-weight:600;
  color:var(--text-dim); padding:0.4rem 1rem;
  border:1px solid rgba(255,255,255,0.06); border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.02); transition:var(--transition);
}
.trust-logo:hover { color:var(--primary-light); border-color:rgba(16,185,129,0.2); background:rgba(5,150,105,0.05); }

/* === CARDS === */
.card {
  background:var(--surface); border-radius:var(--radius-lg); padding:2rem;
  border:1px solid rgba(255,255,255,0.06); transition:var(--transition);
  position:relative; overflow:hidden;
}
.card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(5,150,105,0.15); }
.card-dark {
  background:var(--surface); border-radius:var(--radius-lg); padding:2rem;
  border:1px solid rgba(255,255,255,0.06); transition:var(--transition);
}
.card-dark:hover { border-color:rgba(5,150,105,0.2); box-shadow:0 0 30px rgba(5,150,105,0.05); transform:translateY(-4px); }
.tilt-card { transition:transform 0.3s ease; }

/* === ICON BOXES === */
.icon-box {
  width:52px; height:52px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-md);
}
.icon-box svg, .icon-box i { width:24px; height:24px; }
.icon-box-teal { background:rgba(5,150,105,0.1); color:var(--primary-light); }
.icon-box-blue { background:rgba(59,130,246,0.1); color:var(--blue); }
.icon-box-green { background:rgba(16,185,129,0.1); color:var(--green); }
.icon-box-amber { background:rgba(245,158,11,0.1); color:var(--amber); }
.icon-box-purple { background:rgba(139,92,246,0.1); color:var(--purple); }
.icon-box-red { background:rgba(239,68,68,0.1); color:var(--red); }
.icon-box-cyan { background:rgba(5,150,105,0.1); color:var(--primary-light); }
.card-icon { margin-bottom:var(--space-md); color:var(--primary-light); }
.card-icon svg, .card-icon i { width:28px; height:28px; }
.card-link { display:inline-flex; align-items:center; gap:0.25rem; font-weight:600; font-size:0.875rem; color:var(--primary-light); margin-top:var(--space-md); transition:var(--transition); }
.card-link:hover { color:var(--primary-light); gap:0.5rem; }

/* === SOLUTION CARDS (index.html) === */
.solution-card {
  background:var(--surface); border-radius:var(--radius-lg); padding:2.5rem;
  border:1px solid rgba(255,255,255,0.06); transition:var(--transition);
  position:relative; overflow:hidden;
}
.solution-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(5,150,105,0.2); }
.solution-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--gradient-primary);
  opacity:0; transition:var(--transition);
}
.solution-card:hover::before { opacity:1; }
.solution-number {
  font-family:var(--font-mono); font-size:3.5rem; font-weight:800;
  color:rgba(5,150,105,0.08); position:absolute; top:1rem; right:1.5rem; line-height:1;
}

/* === STATS SECTION (index.html) === */
.stats-section {
  background:var(--dark-2); padding:5rem 0; position:relative; overflow:hidden;
}
.stats-section::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(5,150,105,0.08),transparent 50%);
}
.stats-section .container { position:relative; z-index:2; }
.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-lg); }
.stat-item {
  text-align:center; padding:2rem;
  border:1px solid rgba(255,255,255,0.06); border-radius:var(--radius);
  background:rgba(255,255,255,0.03); transition:var(--transition);
}
.stat-item:hover { border-color:rgba(5,150,105,0.2); background:rgba(5,150,105,0.05); }
.stat-value, .counter-value {
  font-family:var(--font-mono); font-size:3rem; font-weight:800;
  background:var(--gradient-primary); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  line-height:1; margin-bottom:0.5rem;
}
.stat-label { font-size:0.875rem; color:var(--text-muted); font-weight:500; }
.stat-bar {
  width:60px; height:3px; background:var(--gradient-primary);
  border-radius:4px; margin:0.75rem auto 0;
}
.stat-card {
  text-align:center; padding:var(--space-xl);
  border:1px solid rgba(255,255,255,0.06); border-radius:var(--radius);
  background:rgba(255,255,255,0.03);
}

/* === STEPS (index.html) === */
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-xl); position:relative; }
.steps-grid::before {
  content:''; position:absolute; top:40px; left:15%; right:15%; height:2px;
  background:linear-gradient(90deg,transparent,var(--primary),var(--primary-light),transparent);
  opacity:0.3;
}
.step-card {
  text-align:center; position:relative; z-index:2;
  background:var(--surface); border-radius:var(--radius-lg); padding:2.5rem 2rem;
  border:1px solid rgba(255,255,255,0.06); transition:var(--transition);
}
.step-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(5,150,105,0.2); }
.step-number {
  width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--gradient-primary);
  font-family:var(--font-mono); font-size:1.25rem; font-weight:800; color:var(--white);
  margin:0 auto var(--space-lg);
  box-shadow:0 4px 20px rgba(5,150,105,0.3);
}
.step-icon { color:var(--primary-light); margin-bottom:var(--space-md); }
.step-icon svg, .step-icon i { width:32px; height:32px; }
.step-num {
  font-family:var(--font-mono); font-size:0.75rem; font-weight:700; color:var(--primary-light);
  margin-bottom:var(--space-sm); display:block;
}

/* === DASHBOARD MOCKUP (index.html) === */
.dashboard-mockup {
  background:var(--dark); border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid rgba(255,255,255,0.08); box-shadow:0 20px 60px rgba(0,0,0,0.3);
}
.mockup-topbar {
  display:flex; align-items:center; gap:0.5rem; padding:0.75rem 1rem;
  background:rgba(255,255,255,0.03); border-bottom:1px solid rgba(255,255,255,0.06);
}
.mockup-dot { width:10px; height:10px; border-radius:50%; }
.mockup-dot:nth-child(1) { background:#ef4444; }
.mockup-dot:nth-child(2) { background:#f59e0b; }
.mockup-dot:nth-child(3) { background:#10b981; }
.mockup-title { margin-left:auto; font-size:0.75rem; color:var(--text-dim); font-family:var(--font-mono); }
.mockup-body { padding:1.5rem; }
.mockup-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:0.75rem; margin-bottom:1rem; }
.mockup-stat {
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--radius-sm); padding:1rem; text-align:center;
}
.mockup-stat span:first-child { display:block; font-size:0.625rem; color:var(--text-dim); margin-bottom:4px; text-transform:uppercase; letter-spacing:0.05em; }
.mockup-stat span:last-child { font-family:var(--font-mono); font-size:1.25rem; font-weight:700; color:var(--primary-light); }
.mockup-chart {
  background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--radius-sm); padding:1rem;
  display:flex; align-items:flex-end; gap:6px; height:120px;
}
.chart-bar {
  flex:1; border-radius:3px 3px 0 0; transition:var(--transition);
  background:linear-gradient(to top,var(--primary),var(--primary-light));
}
.chart-bar:hover { opacity:0.8; }

/* === FEATURE CHECK LIST === */
.feature-check { display:flex; align-items:flex-start; gap:0.75rem; margin-bottom:0.75rem; }
.feature-check .check-icon, .check-icon {
  width:20px; height:20px; min-width:20px; border-radius:50%;
  background:rgba(5,150,105,0.1); color:var(--primary-light);
  display:flex; align-items:center; justify-content:center; font-size:0.75rem; margin-top:2px;
}
.feature-list { display:flex; flex-direction:column; gap:0.5rem; }

/* === TESTIMONIALS === */
.testimonials-grid {
  display:flex; flex-wrap:wrap; gap:var(--space-lg); justify-content:center;
}
.testimonials-grid .testimonial-card { flex:0 1 calc(33.333% - var(--space-lg)); min-width:280px; }
@media(max-width:1024px) { .testimonials-grid .testimonial-card { flex:0 1 calc(50% - var(--space-lg)); } }
@media(max-width:640px) { .testimonials-grid .testimonial-card { flex:0 1 100%; } }
.testimonial-card {
  background:var(--surface); border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--radius-lg); padding:2rem; transition:var(--transition);
}
.testimonial-card:hover { border-color:rgba(5,150,105,0.2); }
.testimonial-quote { font-size:2.5rem; font-weight:800; color:var(--primary-light); opacity:0.5; margin-bottom:0.5rem; }
.testimonial-text { color:var(--text-muted); line-height:1.7; margin-bottom:1.5rem; font-size:0.9375rem; }
.testimonial-author { display:flex; align-items:center; gap:0.75rem; }
.testimonial-avatar {
  width:44px; height:44px; border-radius:50%;
  background:var(--gradient-primary);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:0.875rem; color:var(--white);
}
.testimonial-info { }
.testimonial-name { font-weight:600; color:var(--white); font-size:0.875rem; }
.testimonial-role { font-size:0.75rem; color:var(--text-dim); }
.metric-badge {
  display:inline-flex; padding:0.25rem 0.75rem; border-radius:100px;
  font-family:var(--font-mono); font-size:0.75rem; font-weight:600;
  background:rgba(16,185,129,0.1); color:var(--green); margin-top:0.75rem;
}
.metric-badge-blue { background:rgba(5,150,105,0.1); color:var(--primary-light); }
.metric-badge-amber { background:rgba(245,158,11,0.1); color:var(--amber); }
.metric-badge-cyan { background:rgba(5,150,105,0.1); color:var(--primary-light); }
.metric-badge-green { background:rgba(16,185,129,0.1); color:var(--green); }
.metric-badge-purple { background:rgba(139,92,246,0.1); color:var(--purple); }

/* === CTA SECTION === */
.cta-section, .section-cta {
  position:relative; padding:6rem 0; text-align:center;
  background:var(--dark-2);
  color:var(--white); overflow:hidden;
}
.cta-section h2, .section-cta h2 { color:var(--white); margin-bottom:var(--space-md); }
.cta-section p, .section-cta p { color:var(--text-muted); margin-bottom:var(--space-xl); max-width:500px; margin-left:auto; margin-right:auto; }
.cta-section .btn-group, .section-cta .cta-buttons { justify-content:center; }
.cta-inner { max-width:600px; margin:0 auto; text-align:center; }

/* === SERVICES PAGE === */
.services-hero { padding-top:100px; }
.services-hero .hero-content { max-width:700px; }
.platform-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-lg); }
.platform-card {
  border-radius:var(--radius-lg); padding:2rem; border:1px solid rgba(255,255,255,0.08);
  transition:var(--transition);
}
.platform-card:hover { transform:translateY(-4px); }
.platform-card.shopee { background:linear-gradient(135deg,#ee4d2d15,#ee4d2d05); border-color:#ee4d2d33; }
.platform-card.lazada { background:linear-gradient(135deg,#0f146d15,#0f146d05); border-color:#0f146d33; }
.platform-card.tiktok { background:linear-gradient(135deg,#00f2ea15,#ff004f08); border-color:#00f2ea33; }
.platform-card h3 { color:var(--white); margin-bottom:var(--space-md); }
.platform-card ul { display:flex; flex-direction:column; gap:0.5rem; }
.platform-card li { display:flex; align-items:center; gap:0.5rem; color:var(--text-muted); font-size:0.875rem; }
.platform-card li::before { content:'✓'; color:var(--primary-light); font-weight:700; font-size:0.75rem; }
.feature-card {
  background:var(--surface); border-radius:var(--radius); padding:1.75rem;
  border:1px solid rgba(255,255,255,0.06); transition:var(--transition);
}
.feature-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(5,150,105,0.15); }
.features-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-lg); }
.service-details { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-lg); margin-top:var(--space-2xl); }
.detail-item { display:flex; gap:var(--space-md); }
.detail-icon { color:var(--primary-light); min-width:24px; }
.detail-icon svg, .detail-icon i { width:20px; height:20px; }
.process-flow { display:flex; align-items:center; gap:0; flex-direction:column; }
.process-step { display:flex; align-items:center; gap:var(--space-md); padding:var(--space-md) 0; }
.process-connector { width:2px; height:24px; background:var(--gradient-primary); }
.flow-step { display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.5rem; flex:1; }
.flow-num { font-family:var(--font-mono); font-size:0.6875rem; font-weight:700; color:var(--primary-light); }
.flow-icon { width:48px; height:48px; border-radius:50%; background:rgba(5,150,105,0.1); display:flex; align-items:center; justify-content:center; color:var(--primary-light); }
.flow-icon svg, .flow-icon i { width:22px; height:22px; }
.flow-label { font-size:0.75rem; color:var(--text-muted); font-weight:500; }
.ai-flow { display:flex; align-items:center; gap:var(--space-md); flex-wrap:wrap; justify-content:center; margin:var(--space-2xl) 0; }
.integrations { text-align:center; margin-top:var(--space-3xl); }
.badge-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:0.75rem; margin-top:var(--space-lg); }
.badge, .badge-grid span {
  display:inline-flex; align-items:center; gap:0.35rem;
  font-size:0.8125rem; font-weight:500; padding:0.4rem 1rem;
  border-radius:100px; border:1px solid rgba(255,255,255,0.08); background:var(--surface);
  color:var(--text-muted); transition:var(--transition);
}
.badge:hover { border-color:var(--primary-light); color:var(--primary-light); }
.section-dark .badge, .section-dark .badge-grid span { background:var(--surface); border-color:rgba(255,255,255,0.08); color:var(--text-muted); }

/* === OUR STORY PAGE === */
.hero-story { padding-top:72px; min-height:50vh; }
.hero-story .hero-content { max-width:680px; }
/* Timeline */
.timeline, .section-timeline .timeline {
  position:relative; padding:var(--space-2xl) 0;
}
.timeline::before, .timeline-line {
  content:''; position:absolute; left:50%; top:0; bottom:0; width:2px;
  background:linear-gradient(to bottom,transparent,var(--primary-light),var(--primary-light),transparent);
  transform:translateX(-50%);
}
.timeline-item {
  display:flex; align-items:center; gap:var(--space-xl); margin-bottom:var(--space-2xl);
  position:relative;
}
.timeline-item:nth-child(odd) { flex-direction:row-reverse; text-align:right; }
.timeline-item > * { flex:1; }
.timeline-dot {
  width:16px; height:16px; border-radius:50%;
  background:var(--primary-light); border:3px solid var(--dark);
  position:absolute; left:50%; transform:translateX(-50%);
  z-index:3; box-shadow:0 0 20px rgba(34,211,238,0.4);
}
.timeline-year {
  font-family:var(--font-mono); font-size:1rem; font-weight:700; color:var(--primary-light);
}
.timeline-card {
  background:var(--surface); border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--radius); padding:1.5rem; max-width:420px;
}
.timeline-card h3, .timeline-title { color:var(--white); margin-bottom:0.5rem; font-size:1.125rem; }
.timeline-card p, .timeline-desc { color:var(--text-muted); font-size:0.875rem; line-height:1.6; }
.timeline-content { max-width:420px; }
.timeline-header { display:flex; align-items:center; gap:var(--space-sm); margin-bottom:var(--space-sm); }
/* Values */
.values-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-lg); }
.value-card {
  background:var(--surface); border-radius:var(--radius-lg); padding:2.5rem;
  border:1px solid rgba(255,255,255,0.06); position:relative; overflow:hidden;
  transition:var(--transition);
}
.value-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:rgba(5,150,105,0.15); }
.value-number {
  font-family:var(--font-mono); font-size:5rem; font-weight:800;
  color:rgba(5,150,105,0.04); position:absolute; top:-0.5rem; right:0.5rem; line-height:1;
}
.value-icon { margin-bottom:var(--space-md); color:var(--primary-light); }
.values-header { text-align:center; margin-bottom:var(--space-3xl); }
/* Mission */
.section-mission { padding:6rem 0; }
.mission-text { max-width:600px; }
.mission-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-lg); }
.mission-points { display:flex; flex-direction:column; gap:var(--space-md); margin-top:var(--space-xl); }
.mission-point { display:flex; gap:var(--space-md); align-items:flex-start; }
.mission-deco { position:relative; display:flex; align-items:center; justify-content:center; min-height:300px; }
.deco-cube { position:relative; width:140px; height:140px; transform-style:preserve-3d; animation:rotate-slow 20s linear infinite; }
.deco-cube-face { position:absolute; width:140px; height:140px; border:2px solid rgba(5,150,105,0.15); border-radius:var(--radius); }
.deco-orbit, .deco-orbit-1, .deco-orbit-2 { position:absolute; border:1px dashed rgba(5,150,105,0.1); border-radius:50%; animation:rotate-slow 15s linear infinite; }
.deco-orbit-1 { width:200px; height:200px; }
.deco-orbit-2 { width:260px; height:260px; animation-direction:reverse; animation-duration:20s; }
.deco-dot { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--primary-light); }
.deco-dot-1 { top:10%; right:20%; }
.deco-dot-2 { bottom:15%; left:15%; animation:pulse-glow 2s ease-in-out infinite 0.5s; }
.deco-dot-3 { top:50%; right:5%; animation:pulse-glow 2s ease-in-out infinite 1s; }
/* Team */
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-lg); }
.team-header { text-align:center; margin-bottom:var(--space-3xl); }
.team-card { text-align:center; padding:2rem; }
.team-avatar {
  width:80px; height:80px; border-radius:50%; margin:0 auto var(--space-md);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1.25rem; color:var(--white);
  border:3px solid rgba(5,150,105,0.3);
}
.team-avatar-inner { width:100%; height:100%; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.team-role, .role { font-size:0.8125rem; color:var(--primary-light); font-weight:500; margin-top:2px; margin-bottom:var(--space-sm); }
.team-card p, .team-bio { font-size:0.8125rem; color:var(--text-muted); line-height:1.6; }
/* Spaces */
.spaces-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-lg); }
.spaces-header { text-align:center; margin-bottom:var(--space-3xl); }
.section-spaces { padding:6rem 0; }
.space-card {
  border-radius:var(--radius-lg); padding:2.5rem; color:var(--white);
  transition:var(--transition); min-height:200px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.space-card:hover { transform:translateY(-6px); }
.space-card i, .space-card svg { width:32px; height:32px; margin-bottom:var(--space-md); opacity:0.8; }
.space-card h3 { margin-bottom:0.5rem; }
.space-card p { font-size:0.875rem; opacity:0.8; }
.space-icon { width:48px; height:48px; color:var(--white); opacity:0.8; margin-bottom:var(--space-md); }

/* === CONTACT PAGE === */
.form-group { margin-bottom:var(--space-lg); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-lg); }
.form-label { display:block; font-size:0.8125rem; font-weight:600; color:var(--white); margin-bottom:0.5rem; }
.required { color:var(--red); }
.form-input, .form-select, .form-textarea {
  width:100%; padding:0.75rem 1rem; border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,0.1); background:var(--surface);
  font-size:0.875rem; color:var(--white); transition:var(--transition);
  outline:none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color:var(--primary-light); box-shadow:0 0 0 3px rgba(5,150,105,0.15);
}
.form-input::placeholder, .form-textarea::placeholder { color:var(--text-dim); }
.form-textarea { resize:vertical; min-height:120px; }
.form-select { 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 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem; }
.service-pills { display:flex; flex-wrap:wrap; gap:0.5rem; }
.service-pill {
  cursor:pointer; display:inline-flex; align-items:center;
}
.service-pill input { display:none; }
.service-pill span {
  padding:0.5rem 1rem; border-radius:100px; font-size:0.8125rem;
  border:1px solid rgba(255,255,255,0.1); background:var(--surface);
  transition:var(--transition); font-weight:500; color:var(--text-muted);
}
.service-pill input:checked + span { background:var(--primary-light); color:var(--white); border-color:var(--primary-light); }
.service-pill:hover span { border-color:var(--primary-light); }
.contact-card {
  display:flex; gap:var(--space-md); padding:1.25rem;
  border-radius:var(--radius); border:1px solid rgba(255,255,255,0.06);
  background:var(--surface); transition:var(--transition);
}
.contact-card:hover { border-color:rgba(5,150,105,0.15); box-shadow:var(--shadow-sm); }
.contact-card-icon {
  width:44px; height:44px; min-width:44px; border-radius:var(--radius-sm);
  background:rgba(5,150,105,0.1); color:var(--primary-light);
  display:flex; align-items:center; justify-content:center;
}
.contact-card-icon svg, .contact-card-icon i { width:20px; height:20px; }
.contact-card h4 { font-size:0.8125rem; font-weight:600; margin-bottom:2px; }
.contact-card p { font-size:0.8125rem; color:var(--text-muted); line-height:1.5; }
.contact-link { color:var(--primary-light) !important; }
.map-section {
  position:relative; height:300px;
  background:var(--dark-2);
  display:flex; align-items:center; justify-content:center;
}
.map-card {
  background:var(--surface); border-radius:var(--radius-lg); padding:2.5rem;
  box-shadow:var(--shadow-lg); text-align:center; max-width:320px; border:1px solid rgba(255,255,255,0.06);
}
.map-card svg, .map-card i { width:32px; height:32px; color:var(--primary-light); margin-bottom:var(--space-md); }
.map-card h3 { margin-bottom:var(--space-sm); }
.map-card p { color:var(--text-muted); font-size:0.875rem; line-height:1.6; }

/* === FAQ === */
.faq-list { display:flex; flex-direction:column; gap:0.5rem; }
.faq-item { border:1px solid rgba(255,255,255,0.06); border-radius:var(--radius-sm); overflow:hidden; background:var(--surface); }
.faq-question {
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:1rem 1.25rem; background:none; border:none; cursor:pointer;
  font-size:0.875rem; font-weight:600; color:var(--white); text-align:left;
  transition:var(--transition);
}
.faq-question:hover { color:var(--primary-light); }
.faq-icon {
  font-size:1.25rem; font-weight:300; color:var(--text-dim);
  transition:transform 0.3s; min-width:1.5rem; text-align:center;
}
.faq-item.active .faq-icon { transform:rotate(45deg); color:var(--primary-light); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height 0.3s ease; }
.faq-item.active .faq-answer { max-height:200px; }
.faq-answer-inner { padding:0 1.25rem 1rem; font-size:0.8125rem; color:var(--text-muted); line-height:1.7; }

/* === TOAST === */
.toast {
  position:fixed; bottom:2rem; right:2rem; z-index:10000;
  background:var(--primary); color:var(--white); padding:1rem 1.5rem;
  border-radius:var(--radius); font-size:0.875rem; font-weight:500;
  box-shadow:var(--shadow-lg); transform:translateY(120%); transition:var(--transition);
}
.toast.show { transform:translateY(0); }

/* === FOOTER === */
footer, .footer {
  background:var(--dark); color:var(--text-muted); padding:4rem 0 2rem;
  border-top:1px solid rgba(255,255,255,0.05);
}
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--space-2xl);
  margin-bottom:var(--space-3xl);
}
footer .logo, .footer .logo { margin-bottom:var(--space-md); }
.footer-desc, .footer-brand p { color:var(--text-dim); font-size:0.8125rem; line-height:1.7; margin-bottom:var(--space-lg); max-width:280px; }
.footer-social, .footer-socials { display:flex; gap:0.75rem; }
.social-icon, .social-links a, .footer-socials a {
  width:36px; height:36px; border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dim); transition:var(--transition);
}
.social-icon:hover, .social-links a:hover, .footer-socials a:hover { border-color:var(--primary-light); color:var(--primary-light); background:rgba(5,150,105,0.05); }
.social-icon svg, .social-icon i, .social-links a svg, .social-links a i, .footer-socials a svg, .footer-socials a i { width:16px; height:16px; }
.footer-col { display:flex; flex-direction:column; gap:0.6rem; }
.footer-col h4, .footer-contact h4 { color:var(--white); font-size:0.8125rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.5rem; }
.footer-col a, .footer-contact a { font-size:0.8125rem; color:var(--text-dim); transition:var(--transition); text-decoration:none; }
.footer-col a:hover, .footer-contact a:hover { color:var(--primary-light); }
.footer-bottom {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:var(--space-xl); border-top:1px solid rgba(255,255,255,0.06);
  font-size:0.75rem; color:var(--text-dim);
}
.footer-legal { display:flex; gap:var(--space-lg); }
.footer-legal a { color:var(--text-dim); transition:var(--transition); text-decoration:none; }
.footer-legal a:hover { color:var(--text-muted); }

/* === COLOR CLASSES (for inline styles in HTML) === */
.teal { color:var(--teal); }
.cyan { color:var(--primary-light); }
.blue { color:var(--blue); }
.green { color:var(--green); }
.amber, .orange, .yellow { color:var(--amber); }
.purple, .pink { color:var(--purple); }
.red { color:var(--red); }
.white { color:var(--white); }
.dark { color:var(--dark); }

/* === RESPONSIVE === */
@media (max-width:1280px) {
  .container { padding:0 1.5rem; }
  .hero h1 { font-size:3rem; }
  .section-title, h2 { font-size:2.25rem; }
}
@media (max-width:1024px) {
  .split-layout { grid-template-columns:1fr; gap:var(--space-2xl); }
  .grid-4, .team-grid { grid-template-columns:repeat(2,1fr); }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .steps-grid { grid-template-columns:1fr; max-width:400px; margin:0 auto; }
  .steps-grid::before { display:none; }
  .timeline-item { flex-direction:column !important; text-align:left !important; }
  .timeline::before, .timeline-line { left:1rem; }
  .timeline-dot { left:1rem; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .platform-cards { grid-template-columns:1fr; }
  .service-details { grid-template-columns:repeat(2,1fr); }
  .spaces-grid { grid-template-columns:1fr; }
  .features-grid { grid-template-columns:1fr; }
  .ai-flow { flex-direction:column; }
  .nav, .nav-links { display:none; }
  .btn-header, .header-cta, .nav-cta { display:none !important; }
  .hamburger, .mobile-toggle { display:flex; }
}
@media (max-width:768px) {
  .section { padding:4rem 0; }
  .hero, .services-hero, .hero-story { min-height:auto; padding-top:72px; padding-bottom:2rem; }
  .hero h1 { font-size:2.25rem; }
  .section-title, h2 { font-size:1.75rem; }
  .hero-metrics { flex-direction:column; }
  .trust-logos { gap:1rem; }
  .grid-3, .grid-2, .values-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:var(--space-xl); }
  .footer-bottom { flex-direction:column; gap:var(--space-md); text-align:center; }
  .mockup-stats { grid-template-columns:1fr; }
  .stat-value, .counter-value { font-size:2rem; }
  .btn-group { flex-direction:column; align-items:stretch; }
  .btn-primary, .btn-ghost, .btn-outline, .btn-secondary { width:100%; justify-content:center; }
  .service-details { grid-template-columns:1fr; }
  .mission-grid { grid-template-columns:1fr; }
  .team-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr; }
  .cta-section .btn-group, .section-cta .cta-buttons { flex-direction:column; align-items:center; }
}
@media (max-width:480px) {
  .container { padding:0 1rem; }
  .hero h1 { font-size:1.875rem; }
  .section-title, h2 { font-size:1.5rem; }
  h3 { font-size:1.25rem; }
  .header-inner { padding:0 1rem; }
  .card, .card-dark, .solution-card, .step-card { padding:1.5rem; }
  .value-card { padding:1.75rem; }
}

/* === ACCESSIBILITY === */
@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;
  }
}

/* === UTILITIES === */
.lead { font-size:1.0625rem; color:var(--text-muted); line-height:1.7; }
.centered { text-align:center; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.fb { color:#1877F2; }
.change { font-size:0.75rem; }

/* === PAGE HERO (inner pages variant) === */
.services-hero .section-label, .hero-story .section-label {
  margin-bottom:var(--space-md);
}
.services-hero h1, .hero-story h1 {
  font-size:3rem; font-weight:800; color:var(--white); line-height:1.1;
  margin-bottom:var(--space-md);
}
.services-hero .hero-sub, .hero-story .hero-sub, .hero-story p.lead {
  color:var(--text-muted); max-width:580px;
}

/* === AOS Fallback if AOS not loaded === */
[data-aos] { opacity:0; transform:translateY(20px); transition:opacity 0.6s ease, transform 0.6s ease; }
[data-aos].aos-animate { opacity:1; transform:translateY(0); }
[data-aos="fade-right"] { transform:translateX(-20px); }
[data-aos="fade-right"].aos-animate { transform:translateX(0); }
[data-aos="fade-left"] { transform:translateX(20px); }
[data-aos="fade-left"].aos-animate { transform:translateX(0); }
[data-aos="zoom-in"] { transform:scale(0.95); }
[data-aos="zoom-in"].aos-animate { transform:scale(1); }

/* === SERVICES PAGE HERO ===  */
.services-hero {
  min-height:60vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 40%, var(--dark-3) 100%);
  position:relative; overflow:hidden; padding:140px 24px 80px; text-align:center;
}
.services-hero .container { position:relative; z-index:2; }
.services-hero h1 {
  font-size:clamp(2rem, 5vw, 3.5rem); font-weight:800; color:var(--white);
  line-height:1.1; margin-bottom:var(--space-md); letter-spacing:-1px;
}
.services-hero .hero-sub {
  font-size:clamp(0.9375rem, 1.6vw, 1.125rem); color:var(--text-muted);
  line-height:1.7; max-width:640px; margin:0 auto var(--space-lg);
}

/* === SECTION NUMBER (background watermark) === */
.section-number {
  font-family:var(--font-mono); font-size:clamp(80px, 12vw, 160px);
  font-weight:800; line-height:1; opacity:0.04; position:absolute;
  top:40px; left:40px; pointer-events:none; user-select:none; color:var(--white);
}
.section-dark .section-number { opacity:0.06; }

/* === FEATURE CARDS GRID (services page) === */
.features-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-lg); }
.feature-card {
  background:var(--surface); border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--radius); padding:var(--space-xl) var(--space-lg);
  transition:var(--transition); position:relative; overflow:hidden;
}
.feature-card::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:3px; background:var(--gradient-primary);
  transform:scaleX(0); transform-origin:left; transition:transform 0.4s ease;
}
.feature-card:hover::before { transform:scaleX(1); }
.feature-card:hover {
  border-color:rgba(5,150,105,0.2); transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}
.feature-card .card-icon {
  width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); background:rgba(5,150,105,0.1);
  color:var(--primary-light); margin-bottom:var(--space-md);
}
.feature-card .card-icon i { width:24px; height:24px; }
.feature-card h3 { font-size:1.0625rem; font-weight:700; margin-bottom:0.625rem; color:var(--white); }
.feature-card p { font-size:0.875rem; color:var(--text-dim); line-height:1.65; }

/* Icon color variants for feature cards */
.feature-card .card-icon.icon-teal { background:rgba(20,184,166,0.1); color:var(--teal); }
.feature-card .card-icon.icon-blue { background:rgba(59,130,246,0.1); color:var(--blue); }
.feature-card .card-icon.icon-amber { background:rgba(245,158,11,0.1); color:var(--amber); }
.feature-card .card-icon.icon-green { background:rgba(16,185,129,0.1); color:var(--green); }
.feature-card .card-icon.icon-purple { background:rgba(139,92,246,0.1); color:var(--purple); }
.feature-card .card-icon.icon-red { background:rgba(239,68,68,0.1); color:var(--red); }

@media(max-width:1024px) { .features-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px) { .features-grid { grid-template-columns:1fr; } }

/* === PROCESS FLOW (services - fulfillment) === */
.process-flow {
  display:flex; flex-direction:column; gap:0.75rem; padding:var(--space-lg);
  background:var(--surface); border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,0.06);
}
.process-step {
  display:flex; align-items:center; gap:1rem;
  padding:1rem 1.25rem; background:var(--dark-2); border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,0.06); font-size:0.875rem; font-weight:600;
  color:var(--text); transition:var(--transition);
}
.process-step:hover {
  border-color:rgba(5,150,105,0.2); transform:translateX(6px);
  box-shadow:0 4px 20px rgba(5,150,105,0.08);
}
.process-step .step-num {
  width:32px; height:32px; min-width:32px;
  display:flex; align-items:center; justify-content:center;
  background:var(--gradient-primary); color:var(--white); border-radius:var(--radius-sm);
  font-size:0.8125rem; font-weight:700; font-family:var(--font-mono);
}
.process-step .step-icon { color:var(--primary-light); width:20px; height:20px; }
.process-connector { width:2px; height:16px; background:var(--primary-light); margin-left:35px; opacity:0.3; }

/* === PLATFORM CARDS (marketplace) === */
.platform-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-lg); }
.platform-card {
  border-radius:var(--radius-lg); padding:var(--space-2xl) var(--space-lg);
  position:relative; overflow:hidden; transition:var(--transition);
  border:1px solid rgba(255,255,255,0.08);
}
.platform-card:hover { transform:translateY(-4px); box-shadow:0 25px 60px rgba(0,0,0,0.3); }
.platform-card.shopee { background:linear-gradient(135deg, #ee4d2d, #f7623c); }
.platform-card.lazada { background:linear-gradient(135deg, #0f146d, #1a1faa); }
.platform-card.tiktok { background:linear-gradient(135deg, #1a1a2e 0%, #0d0d1a 60%, rgba(37,244,238,0.13) 100%); border-color:rgba(37,244,238,0.15); }
.platform-card h3 { font-size:1.375rem; font-weight:800; color:var(--white); margin-bottom:var(--space-md); }
.platform-card ul { list-style:none; display:flex; flex-direction:column; gap:0.75rem; }
.platform-card li { display:flex; align-items:center; gap:0.625rem; font-size:0.875rem; color:rgba(255,255,255,0.85); }
.platform-card li::before { content:''; width:6px; height:6px; min-width:6px; border-radius:50%; background:rgba(255,255,255,0.5); }
.tiktok li::before { background:#25f4ee; }
@media(max-width:900px) { .platform-cards { grid-template-columns:1fr; } }

/* === DETAIL ITEMS (service sub-features) === */
.service-details { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-md); margin-top:var(--space-2xl); }
.detail-item {
  padding:var(--space-lg); background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06); border-radius:var(--radius); transition:var(--transition);
}
.detail-item:hover { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.12); }
.detail-item .detail-icon {
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius:0.625rem; background:rgba(5,150,105,0.1); color:var(--primary-light); margin-bottom:0.875rem;
}
.detail-item .detail-icon i { width:20px; height:20px; }
.detail-item h4 { font-size:0.9375rem; font-weight:700; color:var(--white); margin-bottom:0.375rem; }
.detail-item p { font-size:0.8125rem; color:var(--text-dim); line-height:1.6; }
@media(max-width:900px) { .service-details { grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px) { .service-details { grid-template-columns:1fr; } }

/* === AI FLOW DIAGRAM === */
.ai-flow { display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; margin-bottom:var(--space-3xl); position:relative; }
.ai-flow::before {
  content:''; position:absolute; top:50%; left:5%; right:5%;
  height:2px; background:linear-gradient(90deg, var(--primary-light), rgba(5,150,105,0.3), var(--primary-light));
  opacity:0.3; z-index:0;
}
.flow-step { display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.75rem; position:relative; z-index:1; }
.flow-step .flow-icon {
  width:64px; height:64px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius); background:var(--surface); border:2px solid rgba(5,150,105,0.15);
  color:var(--primary-light); box-shadow:0 8px 30px rgba(0,0,0,0.2); transition:var(--transition);
}
.flow-step:hover .flow-icon { border-color:var(--primary-light); box-shadow:var(--shadow-glow); transform:translateY(-4px); }
.flow-step .flow-icon i { width:28px; height:28px; }
.flow-step .flow-label { font-size:0.8125rem; font-weight:600; color:var(--text-muted); }
.flow-step .flow-num { font-family:var(--font-mono); font-size:0.6875rem; font-weight:600; color:var(--primary-light); opacity:0.6; }
@media(max-width:900px) { .ai-flow { grid-template-columns:repeat(3,1fr); } }
@media(max-width:640px) { .ai-flow { grid-template-columns:repeat(2,1fr); } }

/* === INTEGRATION BADGES (services) === */
.integrations {
  margin-top:var(--space-3xl); padding:var(--space-2xl); border-radius:var(--radius-lg);
  background:var(--surface); border:1px solid rgba(255,255,255,0.06);
}
.integrations h3 { text-align:center; font-size:1.125rem; font-weight:700; margin-bottom:var(--space-xl); color:var(--white); }
.badge-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:0.875rem; }
.badge {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.625rem 1.125rem; background:var(--dark-2);
  border:1px solid rgba(255,255,255,0.08); border-radius:0.625rem;
  font-size:0.8125rem; font-weight:600; color:var(--text);
  transition:var(--transition);
}
.badge:hover { border-color:rgba(5,150,105,0.2); box-shadow:var(--shadow-glow); transform:translateY(-2px); }
.badge .dot { width:8px; height:8px; border-radius:50%; }

/* === SECTION VARIANTS (services dark/teal) === */
.section-dark { background:var(--dark-2); }
.section-dark .section-title { color:var(--white); }
.section-dark .section-subtitle { color:var(--text-muted); }
.section-teal { background:var(--dark-3); }
.section-teal .section-title { color:var(--white); }
.section-teal .section-subtitle { color:var(--text-muted); }
.section-teal .section-label { color:var(--teal); }
.section-teal .section-label::before, .section-teal .section-label::after { background:var(--teal); }
.section-teal .detail-item .detail-icon { background:rgba(20,184,166,0.1); color:var(--teal); }

/* === CASE STUDIES === */
.case-study-card {
  background:var(--surface); border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--radius-lg); overflow:hidden; transition:var(--transition);
}
.case-study-card:hover { border-color:rgba(5,150,105,0.15); }
.cs-header { display:flex; gap:0.5rem; padding:1.5rem 2rem 0; flex-wrap:wrap; }
.cs-badge {
  display:inline-flex; align-items:center; gap:0.375rem; padding:0.375rem 0.875rem;
  border-radius:2rem; font-size:0.75rem; font-weight:600; letter-spacing:0.02em;
}
.cs-badge-fulfillment { background:rgba(5,150,105,0.1); color:var(--primary-light); }
.cs-badge-marketplace { background:rgba(245,158,11,0.1); color:var(--amber); }
.cs-badge-ai { background:rgba(139,92,246,0.1); color:var(--purple); }
.cs-badge-crm { background:rgba(20,184,166,0.1); color:var(--teal); }
.cs-body { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2xl); padding:1.5rem 2rem 2rem; }
@media(max-width:900px) { .cs-body { grid-template-columns:1fr; } }
.cs-client { display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; }
.cs-avatar {
  width:48px; height:48px; border-radius:var(--radius-sm); display:flex;
  align-items:center; justify-content:center; font-weight:800; font-size:0.875rem; color:var(--white);
}
.cs-client h3 { font-size:1.125rem; font-weight:700; color:var(--white); }
.cs-industry { font-size:0.8125rem; color:var(--text-muted); margin-top:0.125rem; }
.cs-title { font-size:1.5rem; font-weight:800; color:var(--white); line-height:1.3; margin-bottom:1.5rem; }
.cs-challenge, .cs-solution { margin-bottom:1.25rem; }
.cs-challenge h4, .cs-solution h4 {
  display:flex; align-items:center; gap:0.5rem; font-size:0.875rem; font-weight:700;
  color:var(--white); margin-bottom:0.5rem;
}
.cs-challenge p, .cs-solution p { font-size:0.875rem; color:var(--text-muted); line-height:1.7; }
.cs-results { background:var(--dark-2); border-radius:var(--radius); padding:1.5rem; }
.cs-results h4 {
  font-size:0.8125rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.05em; color:var(--primary-light); margin-bottom:1rem;
}
.cs-metrics { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.25rem; }
.cs-metric {
  padding:1rem; background:var(--surface); border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,0.04); text-align:center;
}
.cs-metric-value {
  font-family:var(--font-mono); font-size:1.5rem; font-weight:800;
  background:var(--gradient-primary); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:0.25rem;
}
.cs-metric-label { font-size:0.75rem; font-weight:600; color:var(--text-muted); }
.cs-metric-change { font-size:0.6875rem; color:var(--green); margin-top:0.25rem; display:flex; align-items:center; justify-content:center; gap:0.25rem; }
.cs-quote {
  border-left:3px solid var(--primary-light); padding-left:1rem; margin-top:1rem;
}
.cs-quote p { font-size:0.875rem; color:var(--text); font-style:italic; line-height:1.6; }
.cs-quote cite { font-size:0.8125rem; color:var(--text-muted); font-style:normal; display:block; margin-top:0.5rem; }

/* === CAREERS / JOB CARDS === */
.job-card {
  background:var(--surface); border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--radius-lg); padding:2rem; margin-bottom:var(--space-lg);
  transition:var(--transition);
}
.job-card:hover { border-color:rgba(5,150,105,0.15); box-shadow:var(--shadow-md); }
.job-header {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:1.5rem; flex-wrap:wrap;
}
.job-title-group h3 { font-size:1.375rem; font-weight:800; color:var(--white); margin-bottom:0.75rem; }
.job-tags { display:flex; flex-wrap:wrap; gap:0.5rem; }
.job-tag {
  display:inline-flex; align-items:center; gap:0.375rem; padding:0.375rem 0.75rem;
  background:var(--dark-2); border:1px solid rgba(255,255,255,0.06);
  border-radius:2rem; font-size:0.75rem; font-weight:500; color:var(--text-muted);
}
.job-body { margin-top:1.5rem; }
.job-summary { color:var(--text-muted); line-height:1.7; font-size:0.9375rem; }
.job-section { margin-top:1.5rem; }
.job-section h4 {
  font-size:0.875rem; font-weight:700; color:var(--white); margin-bottom:0.75rem;
  display:flex; align-items:center; gap:0.5rem;
}
.job-section ul { list-style:none; padding:0; }
.job-section li {
  position:relative; padding-left:1.25rem; margin-bottom:0.5rem;
  font-size:0.875rem; color:var(--text-muted); line-height:1.6;
}
.job-section li::before {
  content:''; position:absolute; left:0; top:0.5rem;
  width:6px; height:6px; border-radius:50%; background:var(--primary-light);
}
.icon-teal { color:var(--teal); }
.icon-amber { color:var(--amber); }
.icon-green { color:var(--green); }
.icon-purple { color:var(--purple); }
.icon-red { color:var(--red); }