:root {
  --bg-dark: #0b0c0f;
  --metal-dark: #232526;
  --metal-mid: #6d7276;
  --metal-light: #d9dfe3;
  --accent-crimson: #ff0040;
  --accent-crimson-glow: rgba(255,0,64,0.16);
  --glass: rgba(255,255,255,0.03);
}
/* Ensure Poppins is available even when HTML doesn't link it */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap');

* { box-sizing: border-box; }

body {
  font-family: 'Poppins', Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, #060607 0%, #0b0c0f 100%);
  color: #e9e9eb;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.navbar {
  padding-left: 15px;
  padding-right: 15px;
}

.bg-metal {
  background: linear-gradient(90deg, #0f1112 0%, #2b2d2f 40%, #7f8488 100%);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

.bg-metal-hero {
  background: linear-gradient(135deg, #0a0a0b 0%, #1b1c1e 50%, #2f3234 100%);
  color: #fff;
}



/* Navbar collapse — use Bootstrap defaults; do not hide the collapse with custom CSS */
.navbar .navbar-toggler {
  display: block;
  margin-right: 15px;
  float: right;
  border: none;
  background: transparent;
  padding: 4px 6px; /* subtle padding */
  border-radius: 0; /* no oval, show basic hamburger */
}

/* Keep default collapse/show behavior and make the collapsed menu transparent by default */
.navbar .navbar-collapse {
  position: static;
  background: transparent;
  border: none;
  padding: 0;
}

/* Keep links readable in collapsed mobile menus */
.navbar .navbar-collapse .nav-link { color: rgba(255,255,255,0.9); display:block; padding: .5rem 1rem; }

/* Toggler focus/hover states (subtle) */
.navbar .navbar-toggler:focus, .navbar .navbar-toggler:hover { outline: none; background: rgba(255,255,255,0.02); }

/* Slight background on the mobile collapsed menu */
@media (max-width: 991px) {
  .navbar .navbar-collapse { background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.04)); border-radius: 6px; padding: 6px; }
}

/* Add the following CSS to adjust the navbar toggle icon position */
.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='3' y1='12' x2='27' y2='12' stroke='%23dcdfe2' stroke-width='2'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='27' y2='6' stroke='%23dcdfe2' stroke-width='2'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='27' y2='18' stroke='%23dcdfe2' stroke-width='2'%3E%3C/line%3E%3C/svg%3E");
  background-size: 24px 24px; width: 24px; height: 24px; display:inline-block; position: relative; transform: none; vertical-align: middle;
}
.navbar .navbar-brand { color: var(--metal-light); font-weight: 700; letter-spacing: 0.3px; text-shadow: 0 1px 0 rgba(0,0,0,0.6); }

/* Add subtle neon indicator to brand */
.navbar .navbar-brand::before { content: ''; display:inline-block; width:6px; height:22px; margin-right:12px; vertical-align:middle; background: linear-gradient(180deg, var(--accent-crimson), #ff6a87); border-radius:2px; box-shadow: 0 0 10px rgba(255,0,64,0.14); }

.navbar-nav .nav-link { color: rgba(255,255,255,0.86); font-weight: 500; padding: 0.65rem 0.9rem; transition: color .18s ease, text-shadow .18s ease; }

.navbar-nav .nav-link:hover { color: var(--accent-crimson); text-shadow: 0 0 8px var(--accent-crimson-glow); }

.navbar-nav { margin-left: auto; }

.hero { position: relative; padding: 80px 0; text-align:center; color: #f1f1f3; }

.hero:before { content: ""; position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; pointer-events:none; background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.01) 50%, rgba(255,255,255,0.02) 100%); }

.hero .container { position: relative; z-index: 2; }

.hero h1 { font-size: clamp(32px, 6vw, 64px); font-weight: 800; letter-spacing: -1px; margin-bottom: 16px; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.45); }

.hero p.lead { font-size: 18px; color: #dbe0e3; margin-bottom: 24px; }

.hero img { width: 160px; height:auto; margin-bottom: 20px; border-radius: 12px; box-shadow: 0 6px 30px rgba(0,0,0,0.6), 0 0 14px rgba(255,0,64,0.04) inset; transition: transform 0.2s ease; }

.hero img:hover { transform: translateY(-6px) scale(1.02); }

.logo-frame { display:inline-block; padding:18px; border-radius:20px; background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.02) 100%); border: 1px solid rgba(255,255,255,0.03); box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 18px rgba(255,0,64,0.04) inset; }

/* Icon wrapper to handle transparent assets consistently */
.icon-bg { display:inline-flex; align-items:center; justify-content:center; width:88px; height:88px; border-radius:14px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.03)); border: 1px solid rgba(255,255,255,0.04); box-shadow: 0 8px 20px rgba(0,0,0,0.6), 0 0 12px rgba(255,0,64,0.04) inset; }
.icon-bg img { width:48px; height:48px; object-fit:contain; display:block; background: transparent; }

/* Avatar wrapper for team photos. Works with transparent or non-transparent avatars */
.avatar-bg { display:inline-flex; align-items:center; justify-content:center; width:198px; height:198px; border-radius:50%; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02)); border: 1px solid rgba(255,255,255,0.04); box-shadow: 0 8px 30px rgba(0,0,0,0.6), 0 0 12px rgba(255,0,64,0.04) inset; overflow:hidden; }
.avatar-bg img { width:100%; height:100%; object-fit:cover; display:block; background: transparent; }

/* App icons — larger variants for app cards or featured listings */
.icon-bg.app-large { width:120px; height:120px; border-radius:16px; }
.icon-bg.app-large img { width:72px; height:72px; }

/* App card style for hosted app listings */
.apps-section { padding: 36px 0; }
.app-card { border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.04)); border: 1px solid rgba(255,255,255,0.03); box-shadow: 0 16px 38px rgba(0,0,0,0.6); }
.app-card h5 { margin-top: 12px; margin-bottom:6px; font-weight:800; }
.app-card p { margin-bottom: 14px; }
.app-card .btn-neon { padding: 10px 20px; }

/* Simple badge for product status */
.badge-ghost { display:inline-block; padding:6px 10px; font-size:12px; color:#fff; background: linear-gradient(90deg, var(--accent-crimson), #ff6a87); border-radius:12px; box-shadow: 0 8px 20px rgba(255,0,64,0.06); }

/* Redirect countdown (splash pages) */
.redirect-note { color: #cfd5da; font-size: 14px; }
.redirect-note a { color: var(--accent-crimson); text-decoration: underline; }

/* Feature card */
.feature-card { padding:20px; border-radius:12px; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)); border: 1px solid rgba(255,255,255,0.03); box-shadow: 0 8px 30px rgba(0,0,0,0.6); transition: transform .14s ease, box-shadow .14s ease; }
.feature-card:hover { transform: translateY(-8px); box-shadow: 0 20px 44px rgba(0,0,0,0.72), 0 0 26px rgba(255,0,64,0.08); }
.feature-card h5 { margin-top:8px; margin-bottom:6px; font-weight:700; }
.feature-card p { margin-bottom:0; font-size:14px; }

/* Dashboard card for hero mock */
.dashboard-card { padding:18px; border-radius:12px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04)); border: 1px solid rgba(255,255,255,0.03); box-shadow: 0 18px 48px rgba(0,0,0,0.7); }
.dashboard-top { display:flex; align-items:center; gap:12px; }
.dashboard-title { font-weight:700; color:#e9e9eb; }
.dashboard-body { margin-top:12px; color:#cfd5da; font-size:14px; }


.hero p { margin-bottom: 20px; }

.btn-neon { display:inline-block; padding: 12px 28px; border-radius: 8px; color: #fff; text-decoration:none; font-weight:600; background: linear-gradient(90deg, rgba(255,0,64,0.06), rgba(255,0,64,0.02)); border: 1px solid rgba(255,0,64,0.16); box-shadow: 0 6px 18px rgba(0,0,0,0.42), 0 0 12px var(--accent-crimson-glow); transition: transform .12s ease, box-shadow .12s ease; }

.btn-neon:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.6), 0 0 24px rgba(255,0,64,0.6); }

.btn-outline-metal { background: transparent; border: 1px solid rgba(255,255,255,0.06); color: #e9e9eb; }

.footer { padding: 20px 0; color: rgba(255,255,255,0.85); background: linear-gradient(90deg, #060608 0%, #131416 100%); border-top: 1px solid rgba(255,255,255,0.03); text-align:center; }

.team-section { background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent); padding: 50px 0; }

.team-section h2 { color: #e9e9eb; font-size: 36px; font-weight: 800; margin-bottom: 30px; }
/* Modern section heading with neon accent */
.section-title { position: relative; display:inline-block; padding-bottom: 8px; }
.section-title::after { content: ""; position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:70px; height:4px; background: linear-gradient(90deg, var(--accent-crimson), #ff6a87); box-shadow: 0 6px 22px rgba(255,0,64,0.12); border-radius:3px; }

/* CTA strip above footer */
.cta-bar { padding: 24px 0; margin-top: 36px; border-radius: 12px; background: linear-gradient(90deg, rgba(255,0,64,0.06), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.03); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cta-bar .left { color:#e9e9eb; font-weight:700; }
.cta-bar .right { display:flex; gap:12px; align-items:center; }

/* Spacing and layout for features */
.features { padding: 36px 0; }

/* Small utility for muted nav */
.muted { color: #9aa0a6; }

.team-member { text-align:center; margin-bottom:36px; }

.team-member h4 { margin-top: 16px; font-size: 20px; }

.team-member p { font-size: 16px; margin-top: 6px; color: #b9bec2; }

.team-member img { width: 185px; height: 185px; object-fit: cover; border-radius: 50%; border: 4px solid rgba(255,255,255,0.04); box-shadow: 0 8px 30px rgba(0,0,0,0.6), 0 0 8px rgba(255,0,64,0.06) inset; transition: transform .18s ease, box-shadow .18s ease; }

.team-member img:hover { transform: translateY(-6px); box-shadow: 0 26px 48px rgba(0,0,0,0.7), 0 0 26px rgba(255,0,64,0.32); }

/* Hover label on team image anchors */
.team-member a { display:inline-block; position:relative; }
.team-member a::after { content: "View profile"; position:absolute; left:50%; transform:translateX(-50%) translateY(6px); bottom: -8px; padding:6px 10px; background: rgba(0,0,0,0.6); color:#fff; font-size:12px; border-radius:8px; opacity:0; transition: opacity .14s ease, transform .14s ease; }
.team-member a:hover::after { opacity:1; transform:translateX(-50%) translateY(0); }

.image-gallery { background: transparent; padding: 40px 0; }

.image-gallery h2 { color: #e9e9eb; font-size: 32px; font-weight: 700; margin-bottom: 20px; }

.image-gallery .row { justify-content:center; gap: 15px; }

.image-gallery img { width:100%; max-width: 280px; height:auto; margin-bottom:20px; cursor:pointer; border-radius:10px; object-fit:cover; box-shadow: 0 6px 24px rgba(0,0,0,0.6), 0 0 10px rgba(255,0,64,0.03); transition: transform .16s ease, box-shadow .16s ease; }

.image-gallery img:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 16px 44px rgba(0,0,0,0.68), 0 0 28px rgba(255,0,64,0.28); }

.support-section { background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent); padding: 40px 0; }

.support-section h2 { color: #e9e9eb; font-size: 28px; font-weight: 700; margin-bottom: 24px; }

.support-section form { max-width: 560px; margin: 0 auto; }

.support-section .form-group { margin-bottom: 18px; }

.support-section label { font-weight:600; color: #cfd5da; }

.support-section input, .support-section textarea { width:100%; padding: 12px 14px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.01); color: #e9e9eb; border-radius: 8px; resize:none; }

.support-section button[type="submit"] { background: linear-gradient(90deg, var(--accent-crimson), #ff6a87); border: none; color: #fff; padding: 12px 18px; border-radius: 8px; font-weight:700; cursor:pointer; box-shadow: 0 8px 24px rgba(255,0,64,0.08); }

.support-section button[type="submit"]:hover { box-shadow: 0 16px 36px rgba(255,0,64,0.16); transform: translateY(-2px); }


/* Screenshot gallery for product pages */
.screenshot-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:20px; align-items:start; }
.screenshot-card { background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.04)); border:1px solid rgba(255,255,255,0.03); padding:12px; border-radius:12px; box-shadow: 0 12px 36px rgba(0,0,0,0.6); transition: transform .14s ease, box-shadow .14s ease; }
.screenshot-card img { width:100%; height:auto; display:block; border-radius:8px; box-shadow: inset 0 0 28px rgba(0,0,0,0.28); }
.screenshot-card:focus, .screenshot-card:hover { transform: translateY(-8px); box-shadow: 0 28px 60px rgba(0,0,0,0.7); outline: none; }