@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  --red: #E31E24;
  --red-dark: #B8151A;
  --navy: #1B2A4A;
  --navy-light: #2A3F6A;
  --navy-dark: #0F1A30;
  --white: #FFFFFF;
  --gray-50: #F8F9FA;
  --gray-100: #F0F2F5;
  --gray-200: #E2E5EA;
  --gray-300: #C5CAD3;
  --gray-600: #6B7280;
  --gray-800: #1F2937;
  --gold: #F5A623;
  --transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* Theme tokens (dark default) */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8F9FA;
  --bg-card: #FFFFFF;
  --text-primary: #1F2937;
  --text-secondary: #6B7280;
  --border-color: #E2E5EA;
  --navbar-bg: rgba(255,255,255,0.85);
  --mobile-nav-bg: #FFFFFF;
  --mobile-nav-link: #1B2A4A;
  --stats-bg: #FFFFFF;
  --input-bg: #F8F9FA;
  --input-focus-bg: #FFFFFF;
}

[data-theme="light"] {
  --bg-primary: #F0F4FF;
  --bg-secondary: #E8EDF8;
  --bg-card: #FFFFFF;
  --text-primary: #111827;
  --text-secondary: #374151;
  --border-color: #C5CAD3;
  --navbar-bg: rgba(240,244,255,0.92);
  --mobile-nav-bg: #F0F4FF;
  --mobile-nav-link: #111827;
  --stats-bg: #FFFFFF;
  --input-bg: #E8EDF8;
  --input-focus-bg: #FFFFFF;
  --navy: #1B2A4A;
  --gray-800: #111827;
  --gray-600: #374151;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  font-family: 'Inter', sans-serif;
  color: var(--text-primary);
  background: var(--bg-primary);
  overflow-x: hidden;
  line-height: 1.6;
  transition: background 0.4s ease, color 0.4s ease;
}

h1,h2,h3,h4,h5,h6 { font-family: 'Outfit', sans-serif; line-height: 1.2; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ===== NAVBAR ===== */
.navbar {
  position: fixed; top:0; left:0; width:100%; z-index:1000;
  padding: 16px 0;
  background: var(--navbar-bg);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent;
  transition: var(--transition);
}
.navbar.scrolled {
  padding: 10px 0;
  border-bottom-color: var(--gray-200);
  box-shadow: 0 4px 30px rgba(0,0,0,0.06);
}
.navbar .container { display:flex; align-items:center; justify-content:space-between; }
.nav-logo img { height: 48px; transition: var(--transition); }
.navbar.scrolled .nav-logo img { height: 40px; }
.nav-links { display:flex; gap:32px; list-style:none; }
.nav-links a {
  text-decoration:none; color:var(--navy);
  font-weight:500; font-size:0.95rem;
  position:relative; padding:4px 0;
  transition: var(--transition);
}
.nav-links a::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:2px; background:var(--red);
  transition: width 0.3s ease;
}
.nav-links a:hover { color:var(--red); }
.nav-links a:hover::after { width:100%; }
.nav-cta {
  background: var(--red); color:var(--white);
  padding: 10px 24px; border-radius:8px;
  text-decoration:none; font-weight:600;
  font-size:0.9rem; transition: var(--transition);
  border:2px solid var(--red);
}
.nav-cta:hover {
  background:transparent; color:var(--red);
  transform: translateY(-2px);
}
.hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; background:none; border:none; padding:4px;
}
.hamburger span {
  width:28px; height:2.5px; background:var(--navy);
  border-radius:2px; transition: var(--transition);
}
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* ===== HERO ===== */
.hero {
  min-height: 100vh; display:flex; align-items:center;
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 50%, var(--navy-light) 100%);
  position:relative; overflow:hidden; padding-top:80px;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 70% 30%, rgba(227,30,36,0.15) 0%, transparent 50%),
              radial-gradient(circle at 20% 80%, rgba(245,166,35,0.08) 0%, transparent 40%);
}
#particles-canvas {
  position:absolute; inset:0; z-index:1;
}
.hero .container { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.hero-content { color:var(--white); }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(227,30,36,0.15); border:1px solid rgba(227,30,36,0.3);
  padding:6px 16px; border-radius:50px; font-size:0.85rem;
  color:var(--red); font-weight:500; margin-bottom:24px;
  animation: fadeInUp 0.8s ease both;
}
.hero-badge .dot { width:8px; height:8px; border-radius:50%; background:var(--red); animation: pulse 2s infinite; }
.hero h1 {
  font-size: clamp(2.5rem, 5vw, 4rem); font-weight:800;
  margin-bottom:20px; animation: fadeInUp 0.8s 0.2s ease both;
}
.hero h1 .highlight { color:var(--red); position:relative; }
.hero p {
  font-size:1.15rem; opacity:0.85; margin-bottom:36px;
  max-width:500px; animation: fadeInUp 0.8s 0.4s ease both;
}
.hero-buttons { display:flex; gap:16px; animation: fadeInUp 0.8s 0.6s ease both; }
.btn-primary {
  background:var(--red); color:var(--white);
  padding:14px 32px; border-radius:10px;
  text-decoration:none; font-weight:600;
  font-size:1rem; transition: var(--transition);
  display:inline-flex; align-items:center; gap:8px;
  border:2px solid var(--red);
}
.btn-primary:hover { background:var(--red-dark); border-color:var(--red-dark); transform:translateY(-3px); box-shadow: 0 10px 30px rgba(227,30,36,0.3); }
.btn-secondary {
  background:transparent; color:var(--white);
  padding:14px 32px; border-radius:10px;
  text-decoration:none; font-weight:600;
  font-size:1rem; transition: var(--transition);
  border:2px solid rgba(255,255,255,0.3);
  display:inline-flex; align-items:center; gap:8px;
}
.btn-secondary:hover { border-color:var(--white); transform:translateY(-3px); }
.hero-visual {
  position:relative; display:flex; align-items:center; justify-content:center;
  animation: fadeInRight 1s 0.4s ease both;
}
.gear-container { position:relative; width:400px; height:400px; }
.gear-svg { position:absolute; }
.gear-large { width:300px; height:300px; top:50px; left:50px; animation: rotateGear 20s linear infinite; }
.gear-small { width:160px; height:160px; top:0; right:20px; animation: rotateGearReverse 15s linear infinite; }
.gear-tiny { width:100px; height:100px; bottom:20px; left:20px; animation: rotateGear 10s linear infinite; }

/* ===== STATS BAR ===== */
.stats-bar {
  background:var(--bg-primary); padding:40px 0;
  margin-top:-60px; position:relative; z-index:10;
}
.stats-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:32px;
  background:var(--stats-bg); border-radius:20px;
  padding:40px; box-shadow:0 20px 60px rgba(0,0,0,0.08);
  border:1px solid var(--border-color);
}
.stat-item { text-align:center; }
.stat-number {
  font-family:'Outfit',sans-serif; font-size:2.5rem;
  font-weight:800; color:var(--navy);
  display:flex; align-items:center; justify-content:center; gap:2px;
}
.stat-number .suffix { font-size:1.8rem; color:var(--red); }
.stat-label { font-size:0.9rem; color:var(--gray-600); margin-top:4px; font-weight:500; }

/* ===== ABOUT ===== */
.about { padding:100px 0; background:var(--bg-secondary); }
.section-header { text-align:center; margin-bottom:60px; }
.section-tag {
  display:inline-block; font-size:0.85rem; font-weight:600;
  color:var(--red); text-transform:uppercase; letter-spacing:2px;
  margin-bottom:12px;
}
.section-title { font-size:clamp(2rem,4vw,2.8rem); font-weight:800; color:var(--text-primary); margin-bottom:16px; }
.section-subtitle { font-size:1.1rem; color:var(--text-secondary); max-width:600px; margin:0 auto; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about-image {
  position:relative; border-radius:20px; overflow:hidden;
  aspect-ratio:4/3; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  display:flex; align-items:center; justify-content:center;
}
.about-image-inner {
  padding:40px; color:var(--white); text-align:center;
}
.about-image-inner .big-year { font-family:'Outfit'; font-size:5rem; font-weight:900; opacity:0.2; }
.about-image-inner p { font-size:1.2rem; font-weight:600; }
.about-features { display:flex; flex-direction:column; gap:24px; }
.about-feature {
  display:flex; gap:16px; padding:20px;
  border-radius:14px; background:var(--bg-card);
  border:1px solid var(--border-color);
  transition: var(--transition); cursor:default;
}
.about-feature:hover {
  transform:translateX(8px);
  box-shadow:0 8px 30px rgba(0,0,0,0.06);
  border-color:var(--red);
}
.about-feature .icon {
  width:50px; height:50px; border-radius:12px;
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:1.4rem;
}
.about-feature h4 { font-size:1.05rem; color:var(--text-primary); margin-bottom:4px; }
.about-feature p { font-size:0.9rem; color:var(--text-secondary); }

/* ===== PRODUCTS ===== */
.products { padding:100px 0; }
.products-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:28px; }
.product-card {
  background:var(--bg-card); border-radius:18px;
  border:1px solid var(--border-color); overflow:hidden;
  transition: var(--transition); position:relative;
  cursor:pointer;
}
.product-card:hover {
  transform:translateY(-10px);
  box-shadow:0 20px 50px rgba(27,42,74,0.12);
  border-color:var(--red);
}
.product-card .card-image {
  height:220px; overflow:hidden; background:var(--bg-secondary);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.product-card .card-image img {
  width:100%; height:100%; object-fit:contain;
  transition: transform 0.5s ease;
}
.product-card:hover .card-image img { transform:scale(1.08); }
.product-card .card-body { padding:24px; }
.product-card .card-tag {
  font-size:0.75rem; font-weight:600; color:var(--red);
  text-transform:uppercase; letter-spacing:1px; margin-bottom:8px;
}
.product-card h3 { font-size:1.15rem; color:var(--text-primary); margin-bottom:8px; }
.product-card p { font-size:0.88rem; color:var(--text-secondary); margin-bottom:16px; }
.product-card .card-link {
  font-size:0.9rem; font-weight:600; color:var(--red);
  text-decoration:none; display:inline-flex;
  align-items:center; gap:6px; transition: var(--transition);
}
.product-card .card-link:hover { gap:12px; }

/* ===== WHY CHOOSE US ===== */
.why-us { padding:100px 0; background:var(--navy); color:var(--white); position:relative; overflow:hidden; }
.why-us::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 80% 20%, rgba(227,30,36,0.1) 0%, transparent 50%);
}
.why-us .section-tag { color:var(--gold); }
.why-us .section-title { color:var(--white); }
.why-us .section-subtitle { color:rgba(255,255,255,0.7); }
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; position:relative; z-index:2; }
.why-card {
  background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:18px; padding:36px 28px;
  transition: var(--transition); text-align:center;
}
.why-card:hover {
  background:rgba(255,255,255,0.1);
  transform:translateY(-8px);
  border-color:var(--red);
}
.why-card .card-icon {
  width:64px; height:64px; border-radius:16px; margin:0 auto 20px;
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem;
}
.why-card h3 { font-size:1.15rem; margin-bottom:10px; }
.why-card p { font-size:0.9rem; color:rgba(255,255,255,0.7); }

/* ===== INDUSTRIES ===== */
.industries { padding:100px 0; background:var(--bg-secondary); }
.industries-track {
  display:flex; gap:24px; overflow:hidden;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.industries-slide {
  display:flex; gap:24px; animation: scroll 30s linear infinite;
  flex-shrink:0;
}
.industry-chip {
  display:flex; align-items:center; gap:12px;
  padding:16px 28px; background:var(--bg-card);
  border-radius:60px; border:1px solid var(--border-color);
  white-space:nowrap; font-weight:500; font-size:0.95rem;
  color:var(--text-primary); transition: var(--transition);
  flex-shrink:0;
}
.industry-chip:hover { border-color:var(--red); transform:scale(1.05); box-shadow:0 8px 25px rgba(0,0,0,0.06); }
.industry-chip .chip-icon { font-size:1.3rem; }

/* ===== TESTIMONIALS ===== */
.testimonials { padding:100px 0; }
.testimonials-slider { position:relative; max-width:800px; margin:0 auto; overflow:hidden; }
.testimonial-track { display:flex; transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94); }
.testimonial-item {
  min-width:100%; padding:40px;
  background:var(--bg-card); border-radius:20px;
  border:1px solid var(--border-color);
  text-align:center;
}
.testimonial-item .stars { color:var(--gold); font-size:1.2rem; margin-bottom:20px; letter-spacing:4px; }
.testimonial-item blockquote {
  font-size:1.15rem; color:var(--text-primary);
  font-style:italic; margin-bottom:24px;
  line-height:1.8;
}
.testimonial-item .author { font-weight:700; color:var(--text-primary); }
.testimonial-item .role { font-size:0.85rem; color:var(--text-secondary); }
.slider-controls { display:flex; justify-content:center; gap:12px; margin-top:28px; }
.slider-btn {
  width:48px; height:48px; border-radius:50%;
  border:2px solid var(--border-color); background:var(--bg-card);
  cursor:pointer; display:flex; align-items:center;
  justify-content:center; font-size:1.2rem;
  color:var(--text-primary); transition: var(--transition);
}
.slider-btn:hover { border-color:var(--red); color:var(--red); }
.slider-dots { display:flex; gap:8px; justify-content:center; margin-top:20px; }
.slider-dot {
  width:10px; height:10px; border-radius:50%;
  background:var(--gray-300); cursor:pointer;
  transition: var(--transition);
}
.slider-dot.active { background:var(--red); width:28px; border-radius:5px; }

/* ===== CONTACT ===== */
.contact { padding:100px 0; background:var(--bg-secondary); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.contact-info h3 { font-size:1.8rem; color:var(--text-primary); margin-bottom:16px; }
.contact-info > p { color:var(--text-secondary); margin-bottom:32px; }
.contact-detail {
  display:flex; gap:16px; align-items:flex-start;
  margin-bottom:24px;
}
.contact-detail .icon {
  width:48px; height:48px; border-radius:12px;
  background:linear-gradient(135deg,var(--red),var(--red-dark));
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:1.2rem; color:var(--white);
}
.contact-detail h4 { font-size:0.95rem; color:var(--text-primary); margin-bottom:2px; }
.contact-detail p { font-size:0.9rem; color:var(--text-secondary); }
.contact-form {
  background:var(--bg-card); padding:36px;
  border-radius:20px; border:1px solid var(--border-color);
  box-shadow:0 10px 40px rgba(0,0,0,0.04);
}
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-size:0.85rem; font-weight:600; color:var(--text-primary); margin-bottom:6px; }
.form-group input, .form-group textarea, .form-group select {
  width:100%; padding:12px 16px; border-radius:10px;
  border:1.5px solid var(--border-color); font-family:'Inter';
  font-size:0.95rem; transition: var(--transition);
  background:var(--input-bg); outline:none;
  color:var(--text-primary);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color:var(--red); background:var(--input-focus-bg);
  box-shadow:0 0 0 3px rgba(227,30,36,0.1);
}
.form-group textarea { resize:vertical; min-height:120px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.submit-btn {
  width:100%; padding:14px; border:none;
  background:var(--red); color:var(--white);
  font-family:'Outfit'; font-size:1rem;
  font-weight:600; border-radius:10px;
  cursor:pointer; transition: var(--transition);
}
.submit-btn:hover { background:var(--red-dark); transform:translateY(-2px); box-shadow:0 8px 25px rgba(227,30,36,0.3); }

/* ===== FOOTER ===== */
.footer { background:var(--navy-dark); color:var(--white); padding:60px 0 0; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer-brand p { color:rgba(255,255,255,0.6); font-size:0.9rem; margin-top:16px; line-height:1.7; }
.footer-brand img { height:44px; filter:brightness(0) invert(1); }
.footer h4 { font-size:1rem; margin-bottom:16px; font-weight:600; }
.footer ul { list-style:none; }
.footer ul li { margin-bottom:10px; }
.footer ul a { color:rgba(255,255,255,0.6); text-decoration:none; font-size:0.9rem; transition: var(--transition); }
.footer ul a:hover { color:var(--red); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,0.1);
  padding:20px 0; text-align:center;
  font-size:0.85rem; color:rgba(255,255,255,0.5);
}

/* ===== SCROLL REVEAL ===== */
.reveal {
  opacity:0; transform:translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp { from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)} }
@keyframes fadeInRight { from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)} }
@keyframes rotateGear { to{transform:rotate(360deg)} }
@keyframes rotateGearReverse { to{transform:rotate(-360deg)} }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:0.4} }
@keyframes scroll { 0%{transform:translateX(0)}100%{transform:translateX(-50%)} }
@keyframes float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)} }

/* ===== CUSTOM CURSOR ===== */
.custom-cursor {
  width:20px;height:20px;border:2px solid var(--red);
  border-radius:50%;position:fixed;pointer-events:none;
  z-index:9999;transition:transform 0.15s ease, opacity 0.15s ease;
  mix-blend-mode:difference;
}
.custom-cursor.hover { transform:scale(2); opacity:0.6; }

/* ===== BACK TO TOP ===== */
.back-to-top {
  position:fixed; bottom:30px; right:30px;
  width:50px; height:50px; border-radius:14px;
  background:var(--red); color:var(--white);
  border:none; cursor:pointer; font-size:1.3rem;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(20px);
  transition: var(--transition); z-index:100;
  box-shadow:0 8px 25px rgba(227,30,36,0.3);
}
.back-to-top.visible { opacity:1; transform:translateY(0); }
.back-to-top:hover { transform:translateY(-4px); }

/* ===== MOBILE NAV ===== */
.mobile-nav {
  display:none; position:fixed; top:0; left:0;
  width:100%; height:100vh; background:var(--mobile-nav-bg);
  z-index:999; padding:100px 24px 40px;
  flex-direction:column; gap:0;
  transform:translateX(100%); transition: transform 0.4s ease;
}
.mobile-nav.open { transform:translateX(0); display:flex; }
.mobile-nav a {
  display:block; padding:16px 0; font-size:1.2rem;
  font-weight:600; color:var(--mobile-nav-link); text-decoration:none;
  border-bottom:1px solid var(--border-color); transition: var(--transition);
}
.mobile-nav a:hover { color:var(--red); padding-left:10px; }

/* ===== THEME TOGGLE ===== */
.theme-toggle {
  width:42px; height:42px; border-radius:50%;
  border:2px solid var(--border-color);
  background:var(--bg-card);
  cursor:pointer; display:flex; align-items:center;
  justify-content:center; font-size:1.15rem;
  transition: var(--transition);
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color:var(--red);
  transform:rotate(20deg) scale(1.1);
  box-shadow:0 4px 18px rgba(227,30,36,0.2);
}
[data-theme="light"] .theme-toggle { background:#fff; border-color:#C5CAD3; }

/* ===== RESPONSIVE ===== */
@media(max-width:1024px) {
  .hero .container { grid-template-columns:1fr; text-align:center; }
  .hero p { margin:0 auto 36px; }
  .hero-buttons { justify-content:center; }
  .hero-visual { display:none; }
  .about-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .why-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
  .nav-links { display:none; }
  .nav-cta { display:none; }
  .hamburger { display:flex; }
  .hero h1 { font-size:2.2rem; }
  .stats-grid { grid-template-columns:1fr 1fr; padding:28px; gap:20px; }
  .contact-grid { grid-template-columns:1fr; }
  .why-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .custom-cursor { display:none; }
}
@media(max-width:480px) {
  .stats-grid { grid-template-columns:1fr; }
  .hero-buttons { flex-direction:column; align-items:center; }
}