:root{
  --bg1:#04131e;
  --bg2:#072a3a;
  --brand:#00d4ff;
  --brand2:#00ffa8;
  --text:#eaf7fb;
  --muted:#a8c2cc;
  --card:rgba(255,255,255,0.07);
  --glass:rgba(255,255,255,0.12);
  --border:rgba(255,255,255,0.25);
  --shadow:rgba(0,0,0,0.35);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 600px at 10% -10%, #0a3b55 0%, transparent 60%),
    radial-gradient(800px 500px at 90% 10%, #0a5a6f 0%, transparent 60%),
    linear-gradient(160deg, var(--bg1), var(--bg2));
  line-height:1.6;
}

img{ max-width:100%; display:block; }
.container{ width:min(1200px,92vw); margin-inline:auto; }

.sr-only{
  position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.skip-link{ position:absolute; left:-9999px; top:auto; }
.skip-link:focus{ left:1rem; top:1rem; z-index:10000; background:#000; color:#fff; padding:.5rem .75rem; border-radius:.5rem; }

.topbar{
  font-size:.9rem; color:var(--muted);
  background:rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.topbar .container{ display:flex; align-items:center; justify-content:space-between; padding:.4rem 0; gap:1rem; }
.topbar .link{ color:var(--text); text-decoration:none; opacity:.85; }
.topbar .sep{ opacity:.4; padding-inline:.5rem; }

.nav{ position:sticky; top:0; z-index:999; backdrop-filter: blur(10px); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:.6rem 0; }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--text); font-weight:800; letter-spacing:.5px; }
.brand-logo{
  height: clamp(32px, 4.8vw, 52px);
  width:auto; display:block; object-fit:contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
  image-rendering: -webkit-optimize-contrast;
}
.nav-links{ list-style:none; display:flex; gap:.5rem; margin:0; padding:0; }
.nav-link{ text-decoration:none; color:var(--text); opacity:.9; padding:.4rem .8rem; border-radius:.6rem; transition:.25s ease; }
.nav-link:hover{ background:rgba(255,255,255,0.07); }
.nav-toggle{ display:none; }

.hero{ position:relative; min-height:86vh; display:grid; place-items:center; }
.hero-media{ position:absolute; inset:0; overflow:hidden; }
.hero-media img{ width:100%; height:100%; object-fit:cover; filter:saturate(1) contrast(1.05) brightness(.7); transform:scale(1.03); }
.hero-overlay{ position:absolute; inset:0; background: radial-gradient(60% 60% at 70% 30%, rgba(0,0,0,.1), rgba(0,0,0,.55)); }
.hero-content{ position:relative; z-index:2; text-align:center; padding:7rem 0 5rem; }
.hero-logo{ width:min(520px, 80vw); height:auto; margin:0 auto .7rem; display:block; filter: drop-shadow(0 8px 26px rgba(0,0,0,.55)); }

h1{
  font-size: clamp(1.8rem, 1.4rem + 3vw, 3.6rem);
  line-height:1.1; margin:0 0 .5rem;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  -webkit-background-clip: text; background-clip:text; color:transparent;
}
.subtitle{ color:var(--muted); margin-bottom:1.2rem; }
.hero-cta{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }

.hero-wave{
  position:absolute; left:0; right:0; bottom:-1px; height:90px;
  background: radial-gradient(60px 30px at 50% 0, transparent 50%, rgba(255,255,255,0.06) 51%) repeat-x;
  mask-image: linear-gradient(#000, transparent);
}

.section{ padding:4rem 0; }
.section.alt{ background: linear-gradient(0deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); }
.section-header{ text-align:center; margin-bottom:2rem; }
.section-header h2{ font-size: clamp(1.6rem, 1.2rem + 2vw, 2.2rem); margin:0 0 .4rem; }
.section-header p{ color:var(--muted); margin:0; }

.grid{ display:grid; gap:1rem; }
.services-grid{ grid-template-columns: repeat(12, 1fr); }
.services-grid > .card{ grid-column: span 12; }
@media (min-width: 600px){ .services-grid > .card{ grid-column: span 6; } }
@media (min-width: 1000px){ .services-grid > .card{ grid-column: span 4; } }

.card{
  background: var(--card); border:1px solid rgba(255,255,255,0.08);
  border-radius:1rem; overflow:hidden;
  box-shadow:0 10px 30px var(--shadow);
  transform: translateY(0); transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,0.45); }

.media{ position:relative; margin:0; aspect-ratio:4/3; overflow:hidden; }
.media img.photo{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s ease; }
.card:hover .media img.photo{ transform: scale(1.05); }

figcaption{
  position:absolute; left:.8rem; bottom:.8rem;
  background: rgba(0,0,0,0.45); color:#eaf9ff; padding:.35rem .6rem;
  border-radius:.5rem; font-weight:700; font-size:.95rem;
  border:1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(4px);
}

/* Logo watermark on all figure.media using your logo */
.media::after{
  content: "";
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%) rotate(-10deg);
  width:min(55%, 300px);
  aspect-ratio: 3.8 / 1; /* tune if your logo ratio differs */
  background: center/contain no-repeat url("assets/logo.png");
  opacity:.12; mix-blend-mode: overlay; pointer-events:none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

.card-body{ padding:1rem; }
.card-body p{ margin-top:0; color:#cfe8f2; }
.card-body .btn{ margin-top:.5rem; }

.btn{
  --alpha:.16;
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--text); text-decoration:none;
  padding:.7rem 1rem; border-radius:.9rem;
  background: linear-gradient(135deg, rgba(255,255,255,var(--alpha)), rgba(255,255,255,calc(var(--alpha) * .7)));
  border:1px solid var(--border);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.2);
  backdrop-filter: blur(10px);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  cursor:pointer;
}
.btn:hover{ transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 14px 28px rgba(0,0,0,.28); }
.btn.alt{ background: linear-gradient(135deg, rgba(0,212,255,.12), rgba(0,255,168,.12)); }
.btn.small{ padding:.5rem .75rem; font-size:.92rem; }

.glass{ background: var(--glass); border:1px solid var(--border); backdrop-filter: blur(10px); }

/* Forms */
.form{ padding:1.2rem; border-radius:1rem; box-shadow:0 10px 30px rgba(0,0,0,.25); width:100%; }
.form .form-row{ display:grid; gap:.4rem; margin-bottom:.9rem; }
.form label{ font-weight:700; }
.form input, .form select, .form textarea{
  background: rgba(255,255,255,.08); color:var(++text);
  border:1px solid rgba(255,255,255,.2);
  border-radius:.6rem; padding:.6rem .7rem; outline:none;
}
.form input::placeholder, .form textarea::placeholder{ color:#a8cbd7; }
.form input:focus, .form select:focus, .form textarea:focus{
  border-color: rgba(0,212,255,.6); box-shadow:0 0 0 3px rgba(0,212,255,.15);
}
.form-actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.6rem; }
.form-note{ color:var(--muted); font-size:.9rem; margin:.4rem 0 0; }

.contact-wrap{ display:grid; gap:1rem; align-items:start; grid-template-columns: 1fr; }
.contact-info{ padding:1.2rem; border-radius:1rem; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.contact-info h3{ margin:.2rem 0 .4rem; }
.contact-info p{ margin:.2rem 0; }
.contact-buttons{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.6rem 0 1rem; }
.contact-logo{ height:50px; width:auto; margin-bottom:.5rem; display:inline-block; filter: drop-shadow(0 3px 10px rgba(0,0,0,.35)); }

.map iframe{ width:100%; height:260px; border:0; border-radius:.8rem; }

.about-wrap{ display:grid; gap:1rem; grid-template-columns:1fr; align-items:center; }
@media (min-width: 900px){ .about-wrap{ grid-template-columns: 1.2fr .8fr; } }
.about-text .checks{ list-style:none; padding:0; margin:1rem 0; display:grid; gap:.4rem; }
.about-text .checks li{ display:flex; align-items:center; gap:.5rem; }
.about-media img{ border-radius:1rem; border:1px solid rgba(255,255,255,.2); box-shadow:0 16px 38px rgba(0,0,0,.35); }

.floating-actions{ position:fixed; right:1rem; bottom:1rem; display:grid; gap:.5rem; z-index:9999; }
.floating-actions .btn{ width:48px; height:48px; justify-content:center; }

.footer{ border-top:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.25); }
.footer-inner{ text-align:center; padding:1.2rem 0; color:var(--muted); }
.footer .tiny{ font-size:.85rem; opacity:.8; }

.noscript-note{ margin:1rem; padding:.8rem 1rem; border-radius:.6rem; background:#ffe7e7; color:#590909; border:1px solid #e5baba; }

/* Reveal on scroll */
.reveal{ opacity:0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible{ opacity:1; transform: translateY(0); }

/* Responsive nav */
@media (max-width: 900px){
  .nav-toggle{ display:inline-flex; }
  .nav-links{
    position:absolute; top:64px; right:0; left:0;
    background: rgba(2,18,26,.9);
    backdrop-filter: blur(10px);
    flex-direction:column; align-items:center; gap:.2rem;
    padding:.6rem 0; border-bottom:1px solid rgba(255,255,255,.12);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .nav-links.open{ max-height:260px; }
}

/* No-JS fallback so content is visible even if JS fails */
html.no-js .reveal{ opacity:1 !important; transform:none !important; }