:root{
  --navy:#14213D; --navy-light:#1C2B4A; --ink:#0A1120; --ink-2:#0F1830;
  --green:#7ED321; --green-dark:#5FA816;
  --white:#FFFFFF; --gray-100:#F4F6F8; --gray-200:#E7EAEE; --gray-600:#5B6472;
  --line:rgba(255,255,255,0.09);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink); color:var(--white); font-family:'Inter', sans-serif; -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%; display:block;}
.reveal{opacity:0; transform:translateY(18px); transition:opacity 0.6s ease, transform 0.6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* nav */
nav{
  position:sticky; top:0; z-index:20; height:72px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 2.5rem; background:rgba(10,17,32,0.82); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav .brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
nav .brand img{height:28px; width:auto;}
nav .brand-text{font-weight:800; font-size:19px; color:var(--white); letter-spacing:-0.3px;}
nav .brand-text .accent{color:var(--green);}
nav .links{display:flex; align-items:center; gap:28px; font-size:14px; font-weight:500;}
nav .links a{color:rgba(255,255,255,0.68); text-decoration:none; transition:color 0.15s ease;}
nav .links a:hover, nav .links a.active{color:var(--white);}
nav .links a.btn-nav{
  color:var(--ink); background:var(--green); padding:9px 18px; border-radius:7px; font-weight:700;
}
nav .links a.btn-nav:hover{background:var(--green-dark); color:var(--ink);}

/* hero */
.hero{
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(126,211,33,0.16), transparent 60%),
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), var(--ink);
  background-size:auto, 24px 24px, auto;
  padding:96px 2.5rem 84px; border-bottom:1px solid var(--line);
}
.hero-inner{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center;}
.hero-tag{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color:var(--green); background:rgba(126,211,33,0.09); border:1px solid rgba(126,211,33,0.3);
  padding:6px 14px; border-radius:999px; margin-bottom:26px;
}
.hero-tag::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--green);}
.hero h1{font-size:58px; font-weight:800; line-height:1.06; letter-spacing:-1.6px; margin-bottom:24px;}
.hero h1 .accent{color:var(--green);}
.hero p.lead{font-size:17px; line-height:1.6; color:rgba(255,255,255,0.62); max-width:520px; margin-bottom:30px;}
.check-list{display:flex; flex-wrap:wrap; gap:20px; margin-bottom:36px;}
.check-list span{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:rgba(255,255,255,0.75);}
.check-list .dot{
  width:17px; height:17px; border-radius:50%; background:rgba(126,211,33,0.14); border:1px solid var(--green);
  display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--green); flex-shrink:0;
}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}

.btn{
  font-size:14.5px; font-weight:700; border-radius:8px; padding:14px 26px; border:none;
  text-decoration:none; display:inline-block; cursor:pointer; background:var(--green); color:var(--ink);
  transition:transform 0.15s ease, background 0.15s ease;
}
.btn:hover{background:var(--green-dark); transform:translateY(-1px);}
.btn-outline{background:transparent; color:var(--white); border:1px solid rgba(255,255,255,0.22);}
.btn-outline:hover{border-color:rgba(255,255,255,0.55); background:rgba(255,255,255,0.04);}
.btn-dark{background:var(--navy-light); color:var(--white);}
.btn-dark:hover{background:#25385F;}

/* illustrative workflow card in hero — explicitly a mocked-up example, not a real screenshot */
.workflow-card{
  background:var(--white); border-radius:18px; padding:24px; color:var(--navy);
  box-shadow:0 40px 80px rgba(0,0,0,0.5); max-width:360px; margin-left:auto;
  border:1px solid rgba(255,255,255,0.06);
}
.workflow-card .wf-label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:var(--gray-600); margin-bottom:4px;}
.workflow-card .wf-title{font-size:18px; font-weight:800; margin-bottom:18px;}
.wf-step{display:flex; align-items:flex-start; gap:12px; padding:11px 0; border-top:1px solid var(--gray-200);}
.wf-step:first-of-type{border-top:none;}
.wf-check{
  width:22px; height:22px; border-radius:50%; background:var(--green); color:var(--ink); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; margin-top:1px;
}
.wf-step.pending .wf-check{background:var(--gray-200); color:var(--gray-600);}
.wf-step strong{display:block; font-size:14px; font-weight:700;}
.wf-step span{font-size:12.5px; color:var(--gray-600);}
.workflow-card .wf-note{font-size:11px; color:var(--gray-600); margin-top:16px; font-style:italic;}

/* honest trust strip (no fabricated client logos) */
.trust-strip{
  padding:20px 2.5rem; text-align:center; border-bottom:1px solid var(--line);
  font-size:12.5px; font-weight:600; letter-spacing:0.4px; color:rgba(255,255,255,0.4); text-transform:uppercase;
}

/* section shell */
.section{padding:88px 2.5rem; border-bottom:1px solid var(--line);}
.section.light{background:var(--white); color:var(--navy);}
.section-inner{max-width:1180px; margin:0 auto;}
.section-head{max-width:620px; margin-bottom:52px;}
.section-head .eyebrow{font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--green); margin-bottom:14px;}
.section.light .section-head .eyebrow{color:var(--green-dark);}
.section-head h2{font-size:36px; font-weight:800; letter-spacing:-1px; line-height:1.15;}
.section-head p{font-size:15.5px; color:rgba(255,255,255,0.55); margin-top:16px; line-height:1.6;}
.section.light .section-head p{color:var(--gray-600);}

/* use-case row (safety / HR / operations — the "one platform" proof) */
.usecase-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:56px;}
.usecase-card{background:var(--ink-2); border:1px solid var(--line); border-radius:16px; padding:26px;}
.usecase-card .dept{font-size:11.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--green); margin-bottom:12px;}
.usecase-card h3{font-size:18px; font-weight:800; margin-bottom:10px;}
.usecase-card ul{list-style:none; font-size:13.5px; color:rgba(255,255,255,0.55); line-height:1.9;}
.usecase-card li::before{content:'— '; color:var(--green);}

/* feature grid */
.feature-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.feature-card{background:var(--ink-2); border:1px solid var(--line); border-radius:14px; padding:26px 22px; transition:border-color 0.2s ease, transform 0.2s ease;}
.feature-card:hover{border-color:rgba(126,211,33,0.35); transform:translateY(-3px);}
.feature-card .icon{
  width:42px; height:42px; border-radius:11px; background:rgba(126,211,33,0.12); color:var(--green);
  display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:800; margin-bottom:18px;
}
.feature-card h3{font-size:15.5px; font-weight:700; margin-bottom:8px;}
.feature-card p{font-size:13.5px; color:rgba(255,255,255,0.5); line-height:1.55;}

/* facts band (real, verifiable — replaces fabricated stats) */
.facts-band{background:var(--navy); padding:64px 2.5rem; border-bottom:1px solid var(--line);}
.facts-inner{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr) 1.1fr; gap:32px; align-items:center;}
.fact h4{font-size:30px; font-weight:800; color:var(--green); margin-bottom:6px; letter-spacing:-0.5px;}
.fact p{font-size:13px; color:rgba(255,255,255,0.55); line-height:1.5;}
.facts-cta{background:var(--white); color:var(--navy); border-radius:16px; padding:28px;}
.facts-cta h3{font-size:19px; font-weight:800; margin-bottom:6px; letter-spacing:-0.3px;}
.facts-cta p{font-size:13.5px; color:var(--gray-600); margin-bottom:16px;}
.facts-cta .note{font-size:12px; color:var(--gray-600); margin-top:10px;}

/* honest bottom trust bar */
.bottom-trust{
  padding:24px 2.5rem; display:flex; justify-content:center; gap:38px;
  flex-wrap:wrap; font-size:13px; font-weight:500; color:rgba(255,255,255,0.5);
}
.bottom-trust span{display:flex; align-items:center; gap:7px;}
.bottom-trust .dot{width:15px; height:15px; border-radius:50%; background:rgba(126,211,33,0.16); color:var(--green); display:flex; align-items:center; justify-content:center; font-size:9px;}

/* generic content pages (About) */
.content{max-width:740px; margin:0 auto; padding:16px 2.5rem 90px;}
.content h2{font-size:24px; font-weight:800; margin:36px 0 12px; letter-spacing:-0.4px;}
.content h2:first-child{margin-top:0;}
.content p{font-size:16px; line-height:1.75; color:rgba(255,255,255,0.6); margin-bottom:16px;}

/* pricing */
.pricing-grid{max-width:1180px; margin:0 auto; padding:0 2.5rem 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.price-card{background:var(--ink-2); border:1px solid var(--line); border-radius:16px; padding:28px 24px; display:flex; flex-direction:column;}
.price-card.featured{background:var(--navy); border-color:rgba(126,211,33,0.4);}
.price-card .tier{font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:var(--green); margin-bottom:10px;}
.price-card .workers{font-size:13px; color:rgba(255,255,255,0.5); margin-bottom:18px;}
.price-card .price{font-size:30px; font-weight:800; margin-bottom:2px; letter-spacing:-0.5px;}
.price-card .price span{font-size:14px; font-weight:500; color:rgba(255,255,255,0.4);}
.price-card .annual{font-size:12.5px; color:rgba(255,255,255,0.4); margin-bottom:22px;}
.price-card .btn{margin-top:auto; text-align:center;}
.pricing-note{max-width:740px; margin:0 auto; padding:0 2.5rem 90px; font-size:14.5px; line-height:1.7; color:rgba(255,255,255,0.5);}

/* contact form */
form.contact-form{max-width:500px; margin:0 auto; padding:16px 2.5rem 90px;}
form.contact-form label{display:block; font-size:12.5px; font-weight:700; color:rgba(255,255,255,0.7); text-transform:uppercase; letter-spacing:0.5px; margin:18px 0 8px;}
form.contact-form input, form.contact-form textarea{
  width:100%; background:var(--ink-2); border:1px solid var(--line); border-radius:8px;
  color:var(--white); padding:12px 14px; font-family:'Inter', sans-serif; font-size:15px;
}
form.contact-form textarea{min-height:140px; resize:vertical;}
form.contact-form button{margin-top:22px;}

footer{
  padding:30px 2.5rem; font-size:13px; color:rgba(255,255,255,0.4);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}

@media (max-width:860px){
  nav{padding:0 1.25rem;}
  nav .links{gap:14px; font-size:12.5px;}
  .hero{padding:64px 1.25rem 48px;}
  .hero-inner{grid-template-columns:1fr;}
  .hero h1{font-size:36px; letter-spacing:-1px;}
  .workflow-card{margin:0;}
  .section{padding:56px 1.25rem;}
  .usecase-grid, .feature-grid{grid-template-columns:1fr 1fr;}
  .facts-inner{grid-template-columns:1fr 1fr;}
  .pricing-grid{grid-template-columns:1fr 1fr; padding:0 1.25rem 24px;}
  .pricing-note, form.contact-form, .content{padding-left:1.25rem; padding-right:1.25rem;}
  footer{padding:24px 1.25rem; flex-direction:column;}
}
@media (max-width:520px){
  .usecase-grid, .feature-grid, .pricing-grid{grid-template-columns:1fr;}
  .facts-inner{grid-template-columns:1fr;}
}