/* ShipSec Neon Theme extracted from backup.html */

/*--------------------------------------------------
1. Base Palette & Typography
--------------------------------------------------*/
:root {
  --bg-deep-dark: #0A0C10;
  --bg-surface-dark: #10141C;
  --accent-primary: #38BDF8; /* Sky 400—contrast 7.8:1 on #0A0C10 */
  --accent-secondary: #e0f6dc;
  --text-primary: #E0E0E0;
  --text-secondary: #8892B0;
  --border-color: rgba(56, 189, 248, 0.3);
  --warning-color: #FFD700;
  --critical-color: #FF4136;
  --success-color: var(--accent-secondary);

  --font-primary: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/*--------------------------------------------------
2. Global Overrides
--------------------------------------------------*/
* { margin: 0; padding: 0; box-sizing: border-box; }
html { 
  scroll-behavior: smooth;
  background: var(--bg-deep-dark);
  min-height: 100%;
}
body {
  font-family: var(--font-primary);
  background: transparent;
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* Fixed wallpaper-style background gradient */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  background: 
    radial-gradient(ellipse at top left, rgba(56, 189, 248, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at top right, rgba(20, 196, 255, 0.248) 0%, transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(56, 189, 248, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(0, 71, 121, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0.05) 0%, transparent 70%);
  background-attachment: fixed;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Optional subtle animation - remove if you want completely static */
body::before {
  animation: subtle-shift 30s ease-in-out infinite alternate;
}

@keyframes subtle-shift {
  0% { 
    background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%, 50% 50%;
  }
  100% { 
    background-position: 10% 10%, 90% 10%, 10% 90%, 90% 90%, 50% 50%;
  }
}

/* Headings */
h1,h2,h3,h4,h5,h6{
  font-weight:600; line-height:1.2; color:var(--text-primary); letter-spacing:-0.5px;
}
.gradient-text{
  background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  text-shadow:0 0 5px rgba(0,255,255,.3);
}
.jetbrains-mono-accent{ font-family:var(--font-mono); color:var(--accent-secondary);} 

/*--------------------------------------------------
3. Buttons
--------------------------------------------------*/
.btn{
  border:1px solid var(--accent-primary);
  padding:.75rem 1.5rem;
  border-radius:4px;
  font-weight:600;
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:1px;
  cursor:pointer;
  transition:all .2s ease-in-out;
  font-size:.9rem;
  text-decoration:none;
  display:inline-block;
  position:relative;
  overflow:hidden;
}
.btn-primary{
  background:var(--accent-primary);
  color:var(--bg-deep-dark);
  box-shadow:0 0 10px rgba(56,189,248,.35), inset 0 0 5px rgba(0,0,0,.2);
}
.btn-primary::before{
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  transition:left .4s ease;
}
.btn-primary:hover::before{ left:100%; }
.btn-primary:hover {
  background: transparent;
  color: var(--accent-primary);
  box-shadow: 0 0 15px var(--accent-primary), 0 0 25px var(--accent-primary);
}
.btn-secondary{
  background:transparent; color:var(--accent-primary);
}
.btn-secondary:hover {
  background: var(--accent-primary);
  color: var(--bg-deep-dark);
  box-shadow: 0 0 10px var(--accent-primary);
}
.btn-large{ padding:1rem 2rem; font-size:1rem; }

/* Disable shine overlay on hero section buttons */
.hero .btn-primary::before {
  display: none !important;
}

/*--------------------------------------------------
4. Navbar
--------------------------------------------------*/
.navbar{
  position:fixed; top:0; left:50%; 
  transform:translateX(-50%);
  width:100%; max-width:100%;
  background:transparent; 
  border-radius:0;
  /* border:1px solid transparent;  */
  opacity:0;
  pointer-events:none;
}
.navbar.visible{ 
  opacity:1; 
  pointer-events:auto; 
}
.navbar.docked{

  /* margin-top: 1rem; */
  z-index: 0;
  /* background:rgba(10,12,16,.8);  */
  /* border-bottom-color:var(--border-color); */
}
.navbar.floating{
  background:rgba(10,12,16,.8); 
  top:1rem; width:95%; max-width:1200px; border-radius:8px;
  z-index:1000; transition:all .4s ease-in-out, opacity .4s ease-in-out;
  -webkit-backdrop-filter:blur(10px); 
  box-shadow:0 10px 30px rgba(0,0,0,.2); 
  /* border-color:var(--border-color); */
}

@media (max-width: 768px) {
  .navbar.floating {
    width: calc(100% - 2rem);
  }
}

/*--------------------------------------------------
5. Parallax Integrations Widget
--------------------------------------------------*/
.integrations-widget{
  height:500px; width:100%; position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);
  mask-image:linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);
}
.integrations-scroller{
  display:flex; justify-content:center; gap:2rem; height:100%;
}
.integration-lane{
  display:flex; flex-direction:column; gap:2rem; align-items:center; justify-content:center; transition:transform .3s;
}
.integration-logo{ max-height:60px; max-width:150px; display:flex; align-items:center; justify-content:center; }
.integration-logo:hover{ transform:scale(1.1); }
.integration-logo img{ max-height:60px; max-width:150px; object-fit:contain; }

/* Hide old grid */
.integration-grid{ display:none !important; }

/* === Integrations Widget Full-Width Parallax === */

.integrations{ padding:0; }
.integrations .container{ max-width:none; padding:0; }

.integrations-widget{
  position:relative;
  width:100vw;
  margin-left:calc(-50vw + 50%);
  height:520px;
  overflow:hidden;
  pointer-events:auto;
}


.integration-lane{ gap:3rem; }
.integration-logo{ max-height:180px; max-width:300px; }
.integration-logo img{ max-height:180px; max-width:300px; object-fit:contain; filter:drop-shadow(0 0 8px rgba(0,255,255,0.2)); }

/* Hide old grid */
.integration-grid{ display:none !important; }


.integrations-scroller{ gap:3rem; }
.integration-logo{ max-height:90px; max-width:180px; }
.integration-logo img{ max-height:90px; max-width:180px; }

/*--------------------------------------------------
6. Before/After Slider Enhancements
--------------------------------------------------*/
.before-after-container{ position:relative; width:100%; height:400px; border:1px solid var(--border-color); overflow:hidden; animation:animated-border 8s ease-in-out infinite reverse; }
.before-panel,.after-panel{ position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; }
.before-panel{ width:50%; z-index:2; }
.after-panel{ z-index:1; }
.panel-content{ width:100%; height:100%; padding:1.5rem; background:var(--bg-surface-dark); overflow-y:auto; }
.slider-handle{ position:absolute; top:0; left:50%; width:4px; height:100%; background:var(--accent-primary); cursor:ew-resize; z-index:3; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; }
.handle-grip{ width:40px; height:40px; border-radius:50%; background:var(--bg-deep-dark); border:2px solid var(--accent-primary); display:flex; align-items:center; justify-content:center; gap:4px; }
.handle-grip span{ width:6px; height:6px; background:var(--accent-primary); border-radius:2px; }

/* Alert & Action items */
.alert-item{ font-family:var(--font-mono); padding:.75rem; border-radius:4px; margin-bottom:.75rem; font-size:.85rem; }
.alert-item.critical{ border-left:3px solid var(--critical-color); color:var(--critical-color); background-color:rgba(255,65,54,.1); }
.alert-item.warning{ border-left:3px solid var(--warning-color); color:var(--warning-color); background-color:rgba(255,215,0,.1); }
.alert-item.info{ border-left:3px solid var(--accent-primary); color:var(--accent-primary); background-color:rgba(0,255,255,.1); }

/* Utility */
@keyframes animated-border{0%{box-shadow:0 0 20px rgba(0,255,255,.2), inset 0 0 0 1px var(--border-color);}50%{box-shadow:0 0 30px rgba(57,255,20,.3), inset 0 0 0 1px var(--accent-secondary);}100%{box-shadow:0 0 20px rgba(0,255,255,.2), inset 0 0 0 1px var(--border-color);}}

/*
.stats {
    padding: 4rem 0;
    background: rgba(31, 41, 55, 0.5);
    border-top: 1px solid rgba(55, 65, 81, 0.3);
    border-bottom: 1px solid rgba(55, 65, 81, 0.3);
}

.stats-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.stat {
    text-align: center;
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: #6b97f5;
    margin-bottom: 0.5rem;
}

.stat-label {
    color: #9CA3AF;
    font-size: 0.9rem;
    font-weight: 500;
}
*/