:root{
  --blue:#0a4fd9;
  --dark:#0a2756;
  --text:#1a2b3c;
  --muted:#6b7b8c;
  --bg:#ffffff;
  --soft:#f5f8ff;
  --clear: #ffffff;
  --borders: #e7eefb;
  --footer: #f8f9fa;
}
:root {
  --blue: #46ADDB;
  --dark: #003F7F;
  --text: #1A2B3C;
  --muted: #6B7B8C;
  --bg: #FFFFFF;
  --soft: #F2FBFF;
  --clear: #FFFFFF;
  --borders: #E3F6FF;
  --footer: #F5FAFF;
}
:root {
  /* Primary brand color (darker cyan) */
  --blue:    #1698D8;
  /* Strong text & headings */
  --dark:    #051E3E;
  /* Main body text */
  --text:    #16212B;
  /* Secondary, muted text */
  --muted:   #4A5568;
  /* Page background */
  --bg:      #FFFFFF;
  /* Soft, tinted background for cards/sections */
  --soft:    #E1F7FF;
  /* Fully transparent background (e.g. overlays) */
  --clear:   #FFFFFF;
  /* Divider lines and borders */
  --borders: #BEE3F8;
  /* Footer band */
  --footer:  #DFEFFE;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;display:flex;flex-direction: column;}
input, textarea, select {min-width:200px;padding:.5rem;border:1px solid var(--muted);border-radius:4px;}
a {color: var(--blue); text-decoration: none; transition: color 0.2s;}
p {text-align: justify}
.hero p {text-align: center}
/*a:hover, a:focus {color: var(--dark); text-decoration: underline;}*/
/*a:visited {color: var(--muted);}*/

main{flex:1}
.container{width:min(100vw, 1200px);margin:0 auto;padding:0 1rem}
/* NAV */
.navbar{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--borders)}
.navbar-inner{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}
.logo{font-weight:800;letter-spacing:.5px;color:var(--blue);font-size:1.25rem}
.logo{width: 112px; height: 33px; overflow: hidden; background-image: url("/assets/img/pulsensing_logo.avif"); background-position: center; background-size: cover;}
.nav-links{display:flex;gap:1.25rem;align-items:center}
.nav-links a{color:var(--dark);text-decoration:none;font-weight:600}
.nav-links a.active{color:var(--blue)}
.hamburger{display:none;cursor:pointer;border:0;background:transparent;font-size:1.75rem;color:var(--dark)}
/* HERO */
.hero { display:flex; flex-wrap:wrap; align-items:center; margin:2rem 0; }
.hero-text { flex:1; min-width:300px; align-self: start;}
.hero-text h1 { font-size:2.5rem; margin-bottom:1rem; }
.hero-text p { font-size:1.125rem; margin-bottom:1.5rem; }
.hero-img { flex:1; min-width:300px; text-align:center; }
.hero-img img { max-width:100%; height:auto; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.1); }

.footer-links {display: flex; justify-content: center; gap: 2rem; padding: 1rem 0; background: var(--footer);}
.footer-links a {color: var(--dark); text-decoration: none; font-weight: 600; transition: color 0.2s;}
.footer-links a:hover { color: var(--blue);}

.separator{margin: 20px 0px; height: 1px;background-color: var(--borders);}

/* Modal windows */
.fake_modal {display: flex;justify-content: center;align-items: center;height: 100%;}
.modal {display: flex;display: none;position: fixed;top: 0px;left: 0px;justify-content: center;align-items: center;width: 100%;height: 100%;z-index: 10;background: rgba(200,200,200,.8);}
.modal>div, .fake_modal>div{background-color: var(--bg);padding: 20px;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);width: 100%;max-width: 400px;text-align: center;}

/* Buttons */
button, .btn {display: inline-block;background: var(--blue);color: var(--clear);text-decoration: none;padding: .5rem 1rem;border-radius: 6px;font-weight: 600;margin-top: .75rem;font-size: medium;}
button:hover, .btn:hover {opacity: 0.9;}
button{border: 0px;line-height: 1.5;font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;cursor: pointer;}

/* FAQ Accordion*/
/* Simple accordion styling */
details {border: 1px solid var(--borders); border-radius: 6px; margin-bottom: 1rem; padding: 1rem; background: var(--bg);}
summary {font-weight: 600; cursor: pointer; list-style: none;}
summary::-webkit-details-marker {display: none;}
summary:before { content: "►"; display: inline-block; margin-right: .5rem; transition: transform .2s;}
details[open] summary:before {transform: rotate(90deg);}

/* PRODUCTS GRID */
/*
.section h2{font-size:1.75rem;color:var(--dark);margin:0 0 1rem}
*/
.section{padding:2.5rem 0}
.section.center{text-align:center;}
.center p{text-align:center;}
/*.section { margin:3rem 0; }*/
.section h2 { font-size:2rem; margin-bottom:1rem; color: var(--blue); }

.grid7030{display:grid;grid-template-columns: auto minmax(350px, 30%); gap:1rem}
.grid7030 h2{margin-bottom: 50px}
.grid7030 img{width: 100%; height: auto}
.grid7030 p{padding: 15px 0px}


.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.card{border:1px solid var(--borders);border-radius:12px;overflow:hidden;background:var(--bg);display:flex;flex-direction:column}
.card img{width:100%;height:auto;display:block}
.card-body{padding:1rem;display:flex;flex-direction:column;height:-webkit-fill-available;}
.card-title{margin:0;color:var(--blue);font-size:1.125rem;font-weight:800}
.card-text{margin:.5rem 0 0;color:var(--muted);flex:1}
.card .btn{text-align: center;/*margin: 1rem auto 0px*/}
.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.0rem; }
.feature { border:1px solid var(--borders); border-radius:8px; padding:1rem; }
.feature h3 { margin-top:0; color:var(--dark); }
/* FOOTER */
footer{border-top:1px solid var(--borders);padding:1rem 0;color:var(--muted);text-align:center;margin-top:2rem;background: var(--footer);}


/* Apple-style breadcrumbs */
.breadcrumbs {margin: 1rem auto; padding: 0px;font-size: 0.875rem; font-weight: bold; color: var(--muted);}
.breadcrumbs ol {list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap;}
.breadcrumbs li + li:before {content: "›"; padding: 0 0.5rem;}
.breadcrumbs a {text-decoration: none; color: inherit;}
.breadcrumbs li[aria-current="page"] {color: var(--text); font-weight: 600;}

.legal-section { margin: 2rem 0; }
.legal-section h2 { font-size: 1.5rem; color: var(--dark); margin-bottom: 0.5rem; }
.legal-section p, .legal-section ul { font-size: 0.95rem; color: var(--muted); line-height: 1.6; }
.legal-section ul { padding-left: 1.5rem; }

.column-form { display:flex;flex-direction:column;gap:1rem;max-width:600px; margin-top: 0.5rem; width: -webkit-fill-available;}
.inline-form input, .inline-form textarea, .inline-form select {flex:1}
.resume-form input[type="file"] { padding:.5rem; }
.resume-form button { background:var(--blue);color:var(--clear);padding:.75rem;border:none;border-radius:6px;font-weight:600; }

/* Tweak for the product-quantity inputs */
.order-grid { margin: 2rem 0; }
.order-item { display: flex; flex-direction: column; align-items: center; padding: 1rem; }
.order-item img { max-width: 120px; margin-bottom: .5rem; }
.order-item .desc { font-size: .9rem; color: var(--muted); margin-bottom: .75rem; text-align: center; }
.order-item input[type="number"] {width: 60px; padding: .25rem; font-size: 1rem; text-align: center; border: 1px solid var(--muted); border-radius: 4px;}
.order-submit {margin-top: 1.5rem; text-align: center;}


.hero.hero-overlay {
  position: relative;
  width: 100%;
  min-height: 60vh;            /* adjust as you like */
  background: url('../img/hero.avif') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Darken a bit for text readability */
.hero.hero-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}
/* Container for your overlaid text */
.hero-overlay__content {
  position: relative;          /* on top of the dark overlay */
  text-align: center;
  color: var(--clear);
  padding: 0 1rem;
}
.hero-overlay__content h1 {
  font-size: clamp(2rem,5vw,4rem);
  margin-bottom: 0.5rem;
}
.hero-overlay__content p {
  font-size: 1.125rem;
  max-width: 600px;
  margin: auto;
}


/* Status stepper */
.stepper { display: flex; list-style: none; padding: 0; margin: 0; align-items: self-start;}
.step {position: relative; flex: 1; text-align: center; font-size: 0.75rem; color: var(--muted);}
.step::before {content: ""; display: block; margin: 0 auto 0.25rem; width: 10px; height: 10px; border-radius: 50%; background: var(--borders);}
.step.completed::before,
.step.active::before {background: var(--blue);}
.step::after {content: "";position: absolute;top: 4px;right: 0;width: 100%;height: 2px;background: var(--borders);z-index: -1;}
.step:first-child:after {width: 50%;}
.step:last-child:after {right: 50%;width: 50%;}
.step:only-child:after {width: 0%;}
.step.completed::after {background: var(--blue);}
/* Highlight active step text */
.step.active {font-weight: 600;color: var(--dark);}

/* Status badges */
.status-badge { display:none; padding:0.25em 0.75em; border-radius:12px; font-size:0.875rem; font-weight:600; color:var(--clear); }
/* Shipment statuses */
.status-draft          { background:#6c757d; }
.status-confirmed      { background:#007bff; }
.status-processing     { background:#17a2b8; }
.status-backordered    { background:#ffc107; color:#212529; }
.status-partially_shipped { background:#fd7e14; }
.status-shipped        { background:#28a745; }
.status-completed      { background:#20c997; }
.status-cancelled      { background:#dc3545; }
/* Payment statuses */
.status-unpaid { background:#6c757d; }
.status-partially_paid { background:#fd7e14; }
/* Support-Ticket Statuses */
.status-new            { background: #6c757d; } /* New, unassigned */
.status-open           { background: #007bff; } /* Agent has it */
.status-in_progress    { background: #17a2b8; } /* Being worked */
.status-pending        { background: #ffc107; color: #212529; }
.status-resolved       { background: #28a745; } /* Fixed, awaiting close */
.status-closed         { background: #20c997; } /* Fully closed */
.status-escalated      { background: #dc3545; } /* Urgent/escalated */
table { width:100%; border-collapse:collapse; margin-bottom:2rem; }
th, td { padding:0.5rem; border-bottom:1px solid var(--borders); }
th { text-align:left; }


.logout{padding: 4px 14px; border-radius: 10px;background-color: var(--blue);color: var(--clear);}

/* RESPONSIVE */
@media (max-width: 1200px){
  .navbar-inner, .breadcrumbs ol, main section, main .section{padding-right:15px;padding-left:15px;}
}
@media (max-width: 960px){
  .hero-wrap{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .mini .grid{grid-template-columns:repeat(4,1fr)}
  .status-badge {display:inline-block;}
  .stepper {display:none;}
}
@media (max-width: 640px){
  .nav-links{display:none;flex-direction:column;position:absolute;right:1rem;top:60px;background:var(--bg);border:1px solid var(--borders);border-radius:10px;padding:.75rem;box-shadow:0 10px 25px rgba(0,0,0,.08)}
  .nav-links.show{display:flex}
  .hamburger{display:block}
  .grid{grid-template-columns:1fr}
  .mini .grid{grid-template-columns:repeat(2,1fr)}
  .grid7030{grid-template-columns:1fr}
}
/* collapse to icon-only on small screens */
@media (max-width: 600px) {
  .login-link .label { display: none; }
}