/* Reset & Fonts */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

a{
text-decoration:none;
color:#1e90ff;
text-shadow:0 0 1px rgba(30,144,255,0.15);
}

.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
border:0
}

/* Body & Layout */
body{
background:linear-gradient(180deg,#f9f9f9,#f2f4f7);
color:#1a1a1a;
line-height:1.5;
}

section{
background:linear-gradient(180deg,#ffffff,#fafafa);
padding:2rem;
margin:.5rem auto;
border-radius:10px;
box-shadow:
0 2px 8px rgba(0,0,0,.08),
inset 0 1px 0 rgba(255,255,255,0.6);
}

.hero, footer{
background:linear-gradient(135deg,#0d3b66,#0b3358);
color:#fff;
padding:2rem 1rem;
text-align:center;
position:relative;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Hero Section */
.hero-title{
display:flex;
align-items:center;
justify-content:center;
gap:1rem;
margin-bottom:1rem
}

.hero-title .logo{
width:70px;
height:75px;
object-fit:contain;
filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

.hero-subtitle{
color:#fff;
font-size:1.25rem;
margin-bottom:1rem;
text-shadow:0 1px 2px rgba(0,0,0,0.25);
}

.highlight-text{
color:#59acff;
font-size:1rem;
margin-bottom:.1rem;
display:block;
text-shadow:
0 1px 1px rgba(0,0,0,0.2),
0 0 6px rgba(89,172,255,0.15);
}

.trust-text{
font-size:.9rem;
margin-top:1rem;
text-shadow:0 1px 1px rgba(0,0,0,0.2);
}

/* Buttons */
button{
padding:.85rem 1.6rem;
border:none;
border-radius:10px;
cursor:pointer;
font-size:1rem;
transition:all .22s;
position:relative;
overflow:hidden;
box-shadow:
0 2px 6px rgba(0,0,0,.15),
inset 0 1px 0 rgba(255,255,255,.4),
inset 0 -2px 3px rgba(0,0,0,.08);
}

button:active{
transform:translateY(1px);
box-shadow:
0 1px 3px rgba(0,0,0,.2),
inset 0 2px 4px rgba(0,0,0,.15);
}

.primary-cta{
background:linear-gradient(135deg,#0d3b66,#1e90ff);
color:#fff;
margin:.5rem;
}

.primary-cta:hover{
transform:translateY(-1px);
box-shadow:
0 4px 14px rgba(0,0,0,.25),
inset 0 1px 0 rgba(255,255,255,.5);
}

.secondary-cta{
background:linear-gradient(180deg,#f5f5f5,#eaeaea);
color:#0d3b66;
border:1px solid #0d3b66;
margin:.5rem;
}

.secondary-cta:hover{
background:linear-gradient(135deg,#1e90ff,#0d68c1);
color:#fff;
}

.cta-buttons{
display:flex;
flex-direction:column;
gap:.5rem;
justify-content:center;
align-items:center
}

@media(min-width:768px){
.cta-buttons{flex-direction:row}
}

/* Feature Cards */
.feature-card{
padding:1rem;
margin:.5rem 0;
border-radius:10px;
background:linear-gradient(180deg,#ffffff,#f7f7f7);
box-shadow:
0 2px 6px rgba(0,0,0,.08),
inset 0 1px 0 rgba(255,255,255,.6);
text-align:center;
}

/* HSE */
.hse-section{
background:linear-gradient(180deg,#f9f9f9,#f1f1f1);
max-width:600px;
margin:auto;
border-radius:12px;
padding:2rem;
box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}

.hse-list{
list-style:none;
padding-left:0;
text-align:left;
font-size:1rem;
line-height:1.6
}

.hse-note{
font-style:italic;
color:#555;
margin-top:1rem;
text-shadow:0 1px 1px rgba(255,255,255,.6);
}

/* Proof Strip */
.proof-strip{
display:flex;
gap:6px;
justify-content:center;
margin:12px 0
}

.proof-strip img{
width:30%;
height:60px;
object-fit:cover;
border-radius:6px;
box-shadow:
0 2px 6px rgba(0,0,0,.12),
inset 0 1px 0 rgba(255,255,255,.4);
transition:all .25s
}

@media(min-width:768px){
.proof-strip img{
height:90px;
width:140px;
border-radius:8px;
box-shadow:
0 4px 12px rgba(0,0,0,.18),
inset 0 1px 0 rgba(255,255,255,.4);
}
}

.proof-strip img:hover{
transform:scale(1.05);
}

/* Modals */
.modal{
display:none;
position:fixed;
z-index:999;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.5);
opacity:0;
transition:opacity .5s
}

.modal.modal-open{opacity:1}

.modal-content{
background:linear-gradient(180deg,#ffffff,#f9f9f9);
margin:10% auto;
padding:2rem;
border-radius:10px;
max-width:400px;
box-shadow:
0 6px 20px rgba(0,0,0,.2),
inset 0 1px 0 rgba(255,255,255,.6);
transform:scale(.8);
transition:transform .5s
}

.modal.modal-open .modal-content{transform:scale(1)}

.close{
color:#1a1a1a;
float:right;
font-size:1.5rem;
font-weight:bold;
cursor:pointer;
}

/* Professional Modal */
.professional-modal{
display:none;
position:fixed;
z-index:10000;
left:0;top:0;
width:100%;height:100%;
background:rgba(0,0,0,0.55);
opacity:0;
transition:opacity 0.4s ease-in-out;
}

.professional-modal.modal-open{opacity:1}

.professional-modal-content{
background:linear-gradient(180deg,#ffffff,#f8f9fb);
max-width:460px;
width:90%;
margin:7% auto;
border-radius:14px;
padding:2.2rem 2.4rem;
box-shadow:
0 12px 35px rgba(0,0,0,0.18),
inset 0 1px 0 rgba(255,255,255,.6);
transform:scale(0.92);
transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.professional-modal.modal-open .professional-modal-content{
transform:scale(1)
}

.professional-close{
float:right;
font-size:1.6rem;
font-weight:bold;
color:#333;
cursor:pointer;
transition:all 0.25s ease;
}

.professional-close:hover{
color:#1e90ff;
transform:rotate(90deg);
}

/* Modal Buttons */
.modal-btn{
flex:1;
padding:0.85rem 1.2rem;
font-size:1rem;
border-radius:10px;
border:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:all 0.22s ease-in-out;
font-weight:500;
gap:0.5rem;
box-shadow:
0 2px 6px rgba(0,0,0,0.12),
inset 0 1px 0 rgba(255,255,255,.4);
}

/* CTA Funnel */
.cta-funnel,.learn-more{
text-align:center;
margin:2rem 0
}

/* Responsive */
@media(max-width:768px){
h1{font-size:2rem}
h2{font-size:1.25rem}
.modal-content{width:90%}
}

@media(min-width:768px){
.mobile-only-br{display:none}
}

/* Mobile Only Modal */
.mobile-only-modal{display:block}

@media (min-width: 768px){
.mobile-only-modal{display:none}
}



.modal-buttons {
  display: flex;
  gap: 10px;
}