*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',sans-serif}
html{scroll-behavior:smooth}
:root{
  --bg:#0b0b0b;
  --text:#f7f5f2;
  --muted:#c7c7c7;
  --card:#0f0f0f;
  --card-border:#1a1a1a;
  --accent:#facc15; /* black & yellow accent */
  --btn-text:#000000; /* black text on yellow buttons */
  --header-bg:rgba(0,0,0,0.94);
  --header-scrolled:#070707;
  --footer-bg:#060606;
}  

/* Compact, corporate container sizing */
section{max-width:1400px;margin:0 auto;padding:80px 60px}
/* Full-screen hero base: covers the viewport and centers content */
.hero{height:100vh;min-height:100vh;padding:0;display:flex;align-items:center}
.hero > div{max-width:1000px;margin:0 auto;padding:64px 0}

/* Tighter cards and grid spacing */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px;margin-top:30px}
.card{padding:24px;border-radius:12px}

[data-theme="light"]{
  --bg:#ffffff;
  --text:#0f1720;
  --muted:#475569;
  --card:#f8fafc;
  --card-border:#e6e6e6;
  --accent:#facc15; /* yellow accent in light mode */
  --btn-text:#000000; /* black text on yellow buttons */
  --header-bg:rgba(255,255,255,0.92);
  --header-scrolled:#fff;
  --footer-bg:#f3f4f6;
} 
body{background:var(--bg);color:var(--text);transition:background .25s,color .25s,opacity .35s ease} 

header{
position:fixed;top:0;width:100%;
padding:12px 40px;
display:flex;justify-content:space-between;align-items:center;
background:transparent;
box-shadow:none;
z-index:1000;transition:.22s
}
/* When the page is scrolled add the darker header background */
header.scrolled{background:var(--header-bg);box-shadow:0 4px 18px rgba(0,0,0,.6)}
header .controls{display:flex;gap:10px;align-items:center}
header img{height:40px}


nav a{
margin-left:20px;text-decoration:none;
font-weight:700;color:var(--text);font-size:.95rem;
text-transform:uppercase;letter-spacing:.08em;padding:8px 4px;position:relative
}
nav a::after{
content:"";position:absolute;left:0;bottom:-8px;
height:3px;background:var(--accent);transition:.18s;width:0;border-radius:3px
}
nav a:hover{color:var(--accent)}
nav a:hover::after{width:100%}
nav a.active{color:var(--accent);font-weight:800}
nav a.active::after{width:100%}


.hero{
  position:relative;
  width:100vw;
  max-width:none;
  height:100vh;
  min-height:100vh;
  margin:0;
  padding:0;
  display:flex;align-items:center;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55)),
    url('field.jpg');
  -webkit-background-size: cover;
  background-position:center center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;
  overflow:hidden;
}

/* Ensure hero remains immersive on smaller screens (disable fixed attachment for performance) */
@media(max-width:768px){
  .hero{min-height:80vh;padding:20px;background-attachment:scroll}
  .hero > div{padding:40px 0}
} 

h1{font-size:2.6rem;color:var(--accent);line-height:1.1}
.lead{font-size:1.05rem;color:var(--muted);margin-top:6px;font-weight:600}
h2{font-size:1.6rem;color:var(--accent);margin-bottom:18px}
p{font-size:1rem;line-height:1.6;color:var(--muted);max-width:900px}


section{padding:120px 80px}

.btn{
display:inline-block;margin-top:20px;
padding:12px 28px;border-radius:8px;
background:var(--accent);color:var(--btn-text);
font-weight:800;text-decoration:none;box-shadow:0 6px 18px rgba(250,204,21,0.08);transition:.18s;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(250,204,21,0.12)}
.btn:focus{outline:2px solid rgba(250,204,21,0.18);outline-offset:3px}


.cards{
display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:32px;margin-top:36px
}
.card{
background:var(--card);border:1px solid var(--card-border);
border-radius:18px;padding:40px;
transition:.3s
}
.card:hover{
border-color:var(--accent);
transform:translateY(-10px)
}

.cert-logo{width:80px;height:60px;margin-bottom:18px;display:block}
.cert-logo svg{width:100%;height:100%}
.cert-meta{margin-top:8px;font-size:0.95rem;color:var(--muted)}

table{
width:100%;border-collapse:collapse;margin-top:28px;background:var(--card)
}
th,td{padding:12px}
th{background:var(--accent);color:var(--btn-text);font-weight:700}
tr:nth-child(even){background:rgba(255,255,255,0.02)}

/* Footer styles for corporate layout */
.site-footer{padding:36px 40px;background:var(--footer-bg);color:var(--muted)}
.site-footer .footer-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1400px;margin:0 auto}
.site-footer h4{font-size:1rem;color:var(--text);margin-bottom:8px}
.site-footer p{color:var(--muted)}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer .footer-bottom{text-align:center;margin-top:20px;color:var(--muted);font-size:.95rem}
@media(max-width:768px){.site-footer .footer-inner{grid-template-columns:1fr;gap:18px;padding-bottom:12px}}

form{
max-width:1200px;margin-top:40px;
display:grid;grid-template-columns:1fr;gap:20px
}
input,textarea{
padding:15px;border-radius:10px;
background:var(--card);border:1px solid var(--card-border);color:var(--text);
width:100%;box-sizing:border-box;
}
textarea{height:240px}
button{
padding:18px;
border:none;border-radius:60px;
background:var(--accent);color:var(--btn-text);font-weight:800;cursor:pointer;width:100%;
}

footer{
padding:40px;background:var(--footer-bg);
text-align:center;color:var(--muted)
}

/* Theme toggle styles */
#theme-toggle{background:transparent;border:1px solid rgba(255,255,255,0.08);color:var(--text);padding:10px;border-radius:8px;cursor:pointer;font-size:1rem}
[data-theme="light"] #theme-toggle{border-color:rgba(0,0,0,0.08)}
.floating-theme-toggle{position:fixed;right:18px;bottom:18px;z-index:1001;padding:12px;border-radius:12px;border:1px solid var(--card-border);background:var(--card);color:var(--text);cursor:pointer}
.floating-theme-toggle:hover{transform:translateY(-4px)}

:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}

@media(max-width:768px){
header{padding:15px 25px}
.hero,section{padding:100px 30px}
form{grid-template-columns:1fr}
textarea,button{grid-column:span 1}
h1{font-size:2.4rem}
}

/* Page transition animations */
html.is-page-hidden body { opacity: 0; }
body.is-fading-out { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.is-page-hidden body,
  body.is-fading-out { transition: none !important; opacity: 1 !important; }
}