/* ====================================================================
   Roboduct Landing Page – Neon Ops Theme
   ==================================================================== */

/* ---------- CSS Reset & Global Box-Sizing ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

:root{
  /* Neon Ops Palette */
  --clr-bg-primary:#0B0F1A;
  --clr-bg-secondary:#1A1F2B; /* Used for surfaces/panels */
  --clr-surface:#1A1F2B;
  --clr-primary-neon:#00FFF7;
  --clr-secondary-neon:#FF2E88;
  --clr-tertiary-glow:#F3FF5B;
  --clr-neutral-text:#E0E6F1;
  --clr-muted:#8892A5;
  --clr-critical:#FF4C4C;
  --clr-border:rgba(0, 255, 247, 0.2); /* Primary Neon with alpha */

  /* Typography */
  --font-heading: 'IBM Plex Sans', 'Inter', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-code: 'JetBrains Mono', 'Fira Code', monospace;

  /* Sizing & Transitions */
  --radius:8px; /* Standard rounding */
  --radius-xl:1rem; /* For cards/panels */
  --tr:ease .3s;
  --tr-fast: ease .15s;

  /* Spacing Scale (consistent with previous) */
  --sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.5rem;--sp-6:2rem;--sp-7:3rem;--sp-8:4rem;
}

body{
  font-family:var(--font-body);
  background-color:var(--clr-bg-primary);
  background-image:radial-gradient(circle at 25% 20%,rgba(224, 230, 241,.015) 0,transparent 35%),
                    radial-gradient(circle at 75% 70%,rgba(224, 230, 241,.02) 0,transparent 40%),
                    radial-gradient(circle at 50% 50%,rgba(224, 230, 241,.012) 0,transparent 30%);
  background-size:cover;
  color:var(--clr-neutral-text);
  line-height:1.65;
  font-size:16px;
  padding-top:5rem; /* account for fixed header */
}

h1,h2,h3,h4{
  font-family:var(--font-heading); /* IBM Plex Sans for all headings */
  font-weight:700; /* Default bold for headings */
  line-height:1.2;
  margin-bottom:var(--sp-4);
  color: var(--clr-neutral-text);
  text-shadow: 0 0 5px rgba(0, 255, 247, 0.3); /* Subtle cyan glow for headings */
}
h1{font-size:clamp(2.5rem,4vw,3.25rem); font-family: var(--font-heading); /* Orbitron for Hero H1 */}
h2{
  font-size:clamp(1.75rem,3vw,2.25rem);text-align:center;margin-bottom:var(--sp-6);
  font-weight: 600; /* Make Inter bold for section titles */
  text-shadow: 0 0 8px rgba(0, 255, 247, 0.4); /* Slightly stronger glow for H2 */
}
h3{
  font-size:1.25rem;margin-bottom:var(--sp-3);
  font-weight: 600;
  text-shadow: 0 0 5px rgba(0, 255, 247, 0.3);
}

p{margin-bottom:var(--sp-4);color:var(--clr-muted)}

.container{width:min(92%,1150px);margin-inline:auto}

/* ================================== Header ================================== */
header{
  position:fixed;inset:0 0 auto 0;
  background-color:rgba(26, 31, 43, 0.85); /* Surface color with opacity for panel feel */
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--clr-border);
  z-index:1000;
}
nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-3) var(--sp-4); /* Added horizontal padding to nav directly */
  width:min(92%,1150px);margin-inline:auto; /* Align nav content with page container */
}
.logo{
  font-family: var(--font-heading); /* IBM Plex Sans for logo */
  font-size:1.6rem; /* Slightly larger */
  font-weight:700;
  color:var(--clr-primary-neon);
  letter-spacing:-.5px;
  text-shadow: 0 0 5px var(--clr-primary-neon); /* Reduced shine */
}

/* Nav Links */
.nav-links{display:flex;gap:var(--sp-5);list-style:none}
.nav-links a{
  font-family: var(--font-body); /* Revert nav links to Inter for clarity */
  font-weight:500;
  font-size: 0.95rem;
  color:var(--clr-neutral-text);
  text-decoration:none;
  position:relative;
  padding:var(--sp-2) var(--sp-1); /* Adjusted padding */
  transition:color var(--tr-fast), text-shadow var(--tr-fast);
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-5px;height:2px;
  background:var(--clr-primary-neon);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--tr-fast) ease-out;
  box-shadow: 0 0 5px var(--clr-primary-neon);
}
.nav-links a:hover,.nav-links a:focus{
  color:var(--clr-primary-neon);
  text-shadow:0 0 6px var(--clr-primary-neon);
}
.nav-links a:hover::after,.nav-links a:focus::after{transform:scaleX(1)}

/* Mobile Nav (styles from previous, colors updated) */
.menu-toggle{display:none;background:none;border:none;color:var(--clr-neutral-text);font-size:1.75rem;cursor:pointer}
.mobile-nav-links{
  display:none;flex-direction:column;gap:var(--sp-4);
  background:var(--clr-surface);
  padding:var(--sp-6);
  position:fixed;top:calc(5rem - 1px); /* Align with header bottom */
  left:0;right:0;
  border-bottom:1px solid var(--clr-border);
  z-index:999; /* Below header but above content */
}
@media(max-width:768px){
  nav{padding:var(--sp-3) var(--sp-4); /* Ensure padding on mobile */}
  .container nav { width: 100%;} /* Override container for full-width nav on mobile */
  .nav-links{display:none}
  .menu-toggle{display:block}
  header.mobile-nav-active .mobile-nav-links{display:flex}
}

/* ================================== Hero ================================== */
.hero{
  min-height:55vh; /* Slightly reduced */
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:var(--sp-7) 0 var(--sp-6);
  background:radial-gradient(ellipse at 30% 30%, var(--clr-primary-neon) 0%, transparent 50%),
             radial-gradient(ellipse at 70% 60%, var(--clr-secondary-neon) 0%, transparent 50%),
             var(--clr-bg-primary);
  overflow:hidden;
  border-bottom: 1px solid var(--clr-border);
}
.hero h1{
  background:linear-gradient(90deg,var(--clr-primary-neon), var(--clr-secondary-neon));
  -webkit-background-clip:text;color:transparent;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.6); /* Dark shadow for pop on gradient */
  margin-bottom:var(--sp-4);
}
.hero .subtitle{
  font-size:1.2rem;max-width:700px;margin-inline:auto;color:var(--clr-neutral-text); /* Brighter for contrast */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* Subtle dark shadow */
}

/* Work-in-progress note in Hero */
.wip-note{
  font-size:1rem; /* Increased from 0.9rem */
  color:var(--clr-neutral-text);
  margin-top:var(--sp-5);
  font-family: var(--font-body);
  font-weight: 500; /* Added for more prominence */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* ================================== Content Sections ================================== */
section{
  padding-block:var(--sp-7);
}
/* Styling for .why, .solution, .about to make them feel like panels */
.why, .solution, .about, footer {
  background-color: var(--clr-surface);
  border-radius: var(--radius-xl);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-6);
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--clr-border);
  box-shadow: 0 0 20px rgba(0, 255, 247, 0.05);
  text-align: center; /* Center all inline/text content within these sections */
}
footer {
  margin-top: var(--sp-7); /* Ensure footer has enough top margin */
  margin-bottom: 0; /* Footer should be at the bottom */
  border-radius: var(--radius-xl) var(--radius-xl) 0 0; /* Round top corners only */
  /* text-align: center; is now inherited from the rule above */
}

.footer-content {
  /* This class might not be strictly necessary if all text is centered via footer tag */
  /* but if it exists and causes issues, ensure it allows centering */
  margin-bottom: var(--sp-4);
}

.footer-logo {
  /* Ensure the logo block itself doesn't prevent text centering if it has a fixed width or display:flex */
  margin-bottom: var(--sp-2); /* Space after logo group before copyright */
}

.footer-logo h3{
  font-family: var(--font-heading); /* IBM Plex Sans for footer H3 */
  color:var(--clr-primary-neon);
  font-size: 1.5rem;
  margin-bottom: var(--sp-1);
  text-shadow: 0 0 6px var(--clr-primary-neon);
}
.footer-logo p {
  font-size: 0.85rem;
  color: var(--clr-muted);
  margin-bottom: var(--sp-4);
}
.footer-bottom p {
  margin-bottom: 0;
  color:var(--clr-muted);
  font-size:.8rem;
}

.why p, .about p {
  max-width:700px;margin-inline:auto;font-size:1rem;color:var(--clr-muted); /* Changed to muted */
  /* text-align: center; is now inherited from .why and .about parent section rules */
}

/* ================================== Buttons ================================== */
.btn{
  display:inline-block;
  padding:var(--sp-3) var(--sp-5);
  font-family: var(--font-heading); /* IBM Plex Sans for buttons */
  font-weight:600;
  font-size: 1rem;
  border:2px solid transparent;
  text-decoration:none;
  border-radius:var(--radius);
  position:relative;
  transition: background-color var(--tr), color var(--tr), box-shadow var(--tr), transform var(--tr-fast);
  cursor: pointer;
}
/* Primary Button: Neon cyan background, dark text, glow on hover */
.btn.primary{
  background-color:var(--clr-primary-neon);
  color:var(--clr-bg-primary); /* Dark text for contrast */
  box-shadow: 0 0 10px rgba(0, 255, 247, 0.3), 0 0 15px rgba(0, 255, 247, 0.2);
}
.btn.primary:hover,.btn.primary:focus{
  background-color: var(--clr-primary-neon);
  color:var(--clr-bg-primary);
  box-shadow:0 0 15px var(--clr-primary-neon),0 0 25px var(--clr-primary-neon), 0 0 35px var(--clr-primary-neon);
  transform: translateY(-2px);
}

/* Secondary Button: Outlined with neon edges */
.btn.secondary{
  background-color: transparent;
  border-color: var(--clr-primary-neon);
  color:var(--clr-primary-neon);
  text-shadow: 0 0 4px rgba(0, 255, 247, 0.5);
}
.btn.secondary:hover,.btn.secondary:focus{
  background-color: rgba(0, 255, 247, 0.1);
  color:var(--clr-primary-neon);
  box-shadow:0 0 10px var(--clr-primary-neon),0 0 15px var(--clr-primary-neon);
  transform: translateY(-2px);
}

/* Danger Button: Pink/Red neon background */
.btn.danger{
  background-color: var(--clr-secondary-neon);
  color: var(--clr-neutral-text); /* Light text for contrast on magenta */
  box-shadow: 0 0 10px rgba(255, 46, 136, 0.3), 0 0 15px rgba(255, 46, 136, 0.2);
}
.btn.danger:hover, .btn.danger:focus{
  background-color: var(--clr-secondary-neon);
  color: var(--clr-neutral-text);
  box-shadow: 0 0 15px var(--clr-secondary-neon),0 0 25px var(--clr-secondary-neon), 0 0 35px var(--clr-secondary-neon);
  transform: translateY(-2px);
}


/* ================================== Animations ================================== */
/* Removing old fade-up as sections don't need it with panel styling */
/* section{animation:fade-up .8s ease both} - Removed */
/* @keyframes fade-up{0%{opacity:0;transform:translateY(40px)}100%{opacity:1;transform:translateY(0)}} - Removed */

/* Removing unused styles from previous iterations */
.card, .problem, .vision, .dev-notice, .problem-list, .vision-list, .feature-grid, .value-grid, .problem-statement {
 display: none; /* Effectively removing them as they are not in the current HTML structure */
}

/* Feature List in Solution Section */
.feature-list{
  display: block; /* Or grid if multiple columns are ever needed */
  list-style:none;
  padding:0;
  margin-top: var(--sp-4); /* Add some top margin if needed */
  width: -moz-fit-content; /* For Firefox */
  width: fit-content;   /* Standard */
  margin-left: auto;
  margin-right: auto;
  gap:var(--sp-3); /* This applies if display is grid, harmless otherwise for block */
}
.feature-list li{
  position:relative;
  color:var(--clr-muted);
  font-size:1rem;
  line-height:1.6;
  text-align: left; /* Keep text left-aligned relative to its icon */
  padding-bottom: var(--sp-2); /* Add some space between list items */
}

.feature-list li i {
  color: var(--clr-primary-neon);
  margin-right: var(--sp-3); /* Space between icon and text */
  font-size: 1.1em; /* Slightly larger icon */
  text-shadow: 0 0 6px var(--clr-primary-neon);
  width: 1.5em; /* Ensure consistent spacing for icons of different widths */
  text-align: center; /* Center icon within its allocated width */
  display: inline-block; /* Allows width and text-align to work */
}

/* Remove the ::before pseudo-element styling for bullets as icons replace them */
.feature-list li::before{
  display: none;
}

/* Specific section styling adjustments */
.why h2, .solution h2, .about h2 {
  margin-bottom: var(--sp-5);
  /* text-align: center; is already on h2 rule directly */
}