/* ============================================================
   OCEANEDGE MARINE SERVICES — SHARED DESIGN SYSTEM
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --navy:      #051826;
  --navy-mid:  #071f30;
  --ocean:     #0D3B66;
  --royal:     #0A84FF;
  --steel:     #6E7B8B;
  --white:     #F8FAFC;
  --silver:    #E2E8F0;
  --accent:    #1FB6FF;
  --accent2:   #00E5FF;
  --danger:    #e53e3e;
  --success:   #25D366;

  --grad-1:    linear-gradient(135deg,#051826 0%,#0D3B66 100%);
  --grad-2:    linear-gradient(135deg,#0A84FF 0%,#1FB6FF 100%);
  --grad-hero: linear-gradient(135deg,rgba(5,24,38,.93) 0%,rgba(13,59,102,.72) 65%,rgba(5,24,38,.55) 100%);

  --glass:        rgba(255,255,255,.05);
  --glass-b:      rgba(255,255,255,.09);
  --glass-border: rgba(255,255,255,.10);

  --f-display: 'Space Grotesk', sans-serif;
  --f-body:    'Inter', sans-serif;

  --ease: cubic-bezier(.25,.46,.45,.94);
  --tr:   all .32s var(--ease);

  --glow:      0 0 40px rgba(31,182,255,.15);
  --glow-md:   0 0 24px rgba(31,182,255,.25);
  --card-sh:   0 8px 32px rgba(5,24,38,.45);
}

/* ── RESET ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--f-body);background:var(--navy);color:var(--white);overflow-x:hidden;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{cursor:pointer;font-family:var(--f-body);border:none;background:none}
input,select,textarea{font-family:var(--f-body)}
::selection{background:rgba(31,182,255,.28);color:var(--white)}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--navy)}
::-webkit-scrollbar-thumb{background:var(--ocean);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

/* ── LAYOUT ─────────────────────────────────────────────── */
.container{max-width:1260px;margin:0 auto;padding:0 clamp(1.25rem,5vw,3.5rem)}
.sec{padding:clamp(4rem,8vw,6.5rem) 0}
.sec-sm{padding:clamp(2.5rem,5vw,4rem) 0}

/* ── TYPOGRAPHY ─────────────────────────────────────────── */
h1,h2,h3,h4,h5{font-family:var(--f-display);line-height:1.08;letter-spacing:-.02em}

.eyebrow{
  font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:.625rem;margin-bottom:1.125rem;
}
.eyebrow::before{content:'';width:1.75rem;height:2px;background:var(--grad-2);border-radius:2px;flex-shrink:0}
.eyebrow.center{justify-content:center}
.eyebrow.center::before{display:none}
.eyebrow.center::after{content:'';width:1.75rem;height:2px;background:var(--grad-2);border-radius:2px;flex-shrink:0}

.sec-title{font-size:clamp(1.9rem,3.8vw,2.9rem);font-weight:700;color:var(--white);margin-bottom:.875rem}
.sec-sub{font-size:clamp(.9rem,1.4vw,1.05rem);color:var(--steel);line-height:1.75;max-width:580px}
.sec-sub.wide{max-width:720px}
.sec-header{margin-bottom:3rem}
.sec-header.center{text-align:center}
.sec-header.center .sec-sub{margin:0 auto}
.gradient-text{background:var(--grad-2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-display);font-size:.875rem;font-weight:600;
  padding:.7rem 1.6rem;border-radius:8px;border:none;
  transition:var(--tr);white-space:nowrap;
}
.btn-primary{background:var(--grad-2);color:var(--white);box-shadow:0 0 20px rgba(31,182,255,.28)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 32px rgba(31,182,255,.5)}
.btn-ghost{background:transparent;color:var(--white);border:1px solid var(--glass-border)}
.btn-ghost:hover{background:var(--glass);border-color:rgba(255,255,255,.2)}
.btn-outline{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}
.btn-outline:hover{background:rgba(31,182,255,.1)}
.btn-lg{font-size:1rem;padding:.9rem 2rem;border-radius:10px}
.btn-xl{font-size:1.05rem;padding:1.05rem 2.4rem;border-radius:10px}

/* ── CARDS ───────────────────────────────────────────────── */
.glass-card{
  background:var(--glass);border:1px solid var(--glass-border);
  border-radius:16px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}

/* ── FORM ELEMENTS ───────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:.375rem}
.form-label{font-size:.75rem;font-weight:600;color:rgba(248,250,252,.6);font-family:var(--f-display);letter-spacing:.04em;text-transform:uppercase}
.form-input{
  width:100%;background:rgba(255,255,255,.05);border:1px solid var(--glass-border);
  border-radius:8px;padding:.75rem 1rem;color:var(--white);font-size:.875rem;outline:none;
  transition:border-color .2s,box-shadow .2s;resize:vertical;
}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,182,255,.1)}
.form-input::placeholder{color:rgba(110,123,139,.65)}
.form-input option{background:var(--navy-mid)}
select.form-input{cursor:pointer}

/* ── REVEAL ANIMATIONS ───────────────────────────────────── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.reveal.up{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.1s}.reveal-d2{transition-delay:.18s}
.reveal-d3{transition-delay:.26s}.reveal-d4{transition-delay:.34s}

/* ── BADGE ───────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:.45rem;
  background:rgba(31,182,255,.12);border:1px solid rgba(31,182,255,.28);
  border-radius:100px;padding:.35rem .9rem;
  font-size:.7rem;font-weight:700;color:var(--accent);letter-spacing:.12em;text-transform:uppercase;
  backdrop-filter:blur(8px);
}
.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:blink 2s ease infinite;flex-shrink:0}
@keyframes blink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(31,182,255,.5)}50%{opacity:.7;box-shadow:0 0 0 5px rgba(31,182,255,0)}}

/* ── NAVIGATION ──────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:1.375rem 0;transition:padding .32s var(--ease),background .32s var(--ease),box-shadow .32s var(--ease);
}
.nav.stuck{
  background:rgba(5,24,38,.97);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border-bottom:1px solid var(--glass-border);padding:1rem 0;
  box-shadow:0 4px 30px rgba(5,24,38,.55);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.nav-logo{display:flex;align-items:center;gap:.75rem;flex-shrink:0}
.nav-logo-mark{
  width:38px;height:38px;background:var(--grad-2);border-radius:9px;
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;
}
.nav-logo-text{font-family:var(--f-display);font-size:1.2rem;font-weight:700;color:var(--white)}
.nav-logo-text span{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:.1rem}
.nav-links a{
  font-family:var(--f-display);font-size:.82rem;font-weight:500;
  color:rgba(248,250,252,.72);padding:.45rem .8rem;border-radius:6px;transition:var(--tr);white-space:nowrap;
}
.nav-links a:hover,.nav-links a.active{color:var(--white);background:var(--glass)}
.nav-links a.active{color:var(--accent)}
.nav-actions{display:flex;align-items:center;gap:.625rem;flex-shrink:0}
.hamburger{display:none;flex-direction:column;gap:4.5px;padding:.5rem;background:none;border:none}
.hamburger span{display:block;width:22px;height:1.8px;background:var(--white);border-radius:2px;transition:var(--tr)}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(4.5px,4.5px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(4.5px,-4.5px)}

/* Mobile Nav */
.mob-nav{
  display:none;position:fixed;inset:0;z-index:999;
  background:rgba(5,24,38,.99);backdrop-filter:blur(24px);
  flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;
}
.mob-nav.open{display:flex}
.mob-nav a{font-family:var(--f-display);font-size:1.375rem;font-weight:600;color:rgba(248,250,252,.82);transition:color .2s}
.mob-nav a:hover{color:var(--accent)}
.mob-close{position:absolute;top:1.5rem;right:1.5rem;font-size:1.4rem;color:var(--white);padding:.5rem;background:none;border:none}

/* ── FOOTER ──────────────────────────────────────────────── */
.footer{background:#030e18;border-top:1px solid var(--glass-border);padding-top:clamp(3rem,6vw,5rem)}
.footer-grid{
  display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr 1.4fr;
  gap:clamp(1.5rem,3vw,2.5rem);margin-bottom:clamp(2.5rem,4vw,3.5rem);
  align-items:start;
}
.footer-brand-desc{font-size:.825rem;color:var(--steel);line-height:1.75;margin:1rem 0 1.375rem;max-width:290px}
.footer-socials{display:flex;gap:.625rem}
.soc{
  width:34px;height:34px;border-radius:7px;background:var(--glass);border:1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:center;font-size:.8rem;transition:var(--tr);
}
.soc:hover{background:rgba(31,182,255,.15);border-color:rgba(31,182,255,.3);color:var(--accent)}
.footer-col h4{font-family:var(--f-display);font-size:.82rem;font-weight:600;color:var(--white);margin-bottom:1.125rem;letter-spacing:.02em}
.footer-col ul{display:flex;flex-direction:column;gap:.5rem}
.footer-col ul a{font-size:.775rem;color:var(--steel);transition:color .2s}
.footer-col ul a:hover{color:var(--accent)}
.footer-nl p{font-size:.78rem;color:var(--steel);line-height:1.65;margin-bottom:.875rem}
.nl-form{display:flex;gap:.5rem}
.nl-input{
  flex:1;background:rgba(255,255,255,.05);border:1px solid var(--glass-border);
  border-radius:7px;padding:.6rem .875rem;color:var(--white);font-size:.78rem;outline:none;
  transition:border-color .2s;
}
.nl-input:focus{border-color:var(--accent)}
.nl-input::placeholder{color:var(--steel)}
.footer-bottom{
  border-top:1px solid var(--glass-border);padding:1.375rem 0;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;
}
.footer-copy{font-size:.72rem;color:var(--steel)}
.footer-legal{display:flex;gap:1.25rem}
.footer-legal a{font-size:.72rem;color:var(--steel);transition:color .2s}
.footer-legal a:hover{color:var(--white)}

/* ── FLOATING BUTTONS ────────────────────────────────────── */
.fab-group{position:fixed;bottom:1.75rem;right:1.75rem;z-index:900;display:flex;flex-direction:column;align-items:flex-end;gap:.625rem}
.fab{
  display:inline-flex;align-items:center;gap:.5rem;
  border:none;border-radius:100px;padding:.65rem 1.125rem;
  font-family:var(--f-display);font-size:.78rem;font-weight:600;color:var(--white);
  cursor:pointer;transition:var(--tr);text-decoration:none;
}
.fab-wp{background:#25D366;box-shadow:0 4px 18px rgba(37,211,102,.32)}
.fab-wp:hover{transform:scale(1.05);box-shadow:0 4px 26px rgba(37,211,102,.5)}
.fab-sos{background:var(--danger);box-shadow:0 4px 18px rgba(229,62,62,.35);animation:sosPulse 3s ease infinite}
.fab-sos:hover{transform:scale(1.05)}
@keyframes sosPulse{0%,100%{box-shadow:0 4px 18px rgba(229,62,62,.35)}50%{box-shadow:0 4px 28px rgba(229,62,62,.65)}}

/* ── HERO BASE ───────────────────────────────────────────── */
.hero{position:relative;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;animation:heroDrift 22s ease-in-out infinite alternate}
@keyframes heroDrift{from{transform:scale(1.06)}to{transform:scale(1.06) translateX(-1.5%)}}
.hero-ov{position:absolute;inset:0;background:var(--grad-hero)}
.hero-body{position:relative;z-index:2;padding:clamp(7rem,12vw,9rem) 0 clamp(5rem,8vw,6rem)}

/* ── PAGE HERO (inner pages) ─────────────────────────────── */
.page-hero{
  min-height:52vh;display:flex;align-items:center;
  position:relative;overflow:hidden;
}
.page-hero .hero-bg{filter:brightness(.5)}
.page-hero .hero-ov{background:linear-gradient(135deg,rgba(5,24,38,.95) 0%,rgba(13,59,102,.7) 100%)}
.page-hero-body{position:relative;z-index:2;padding:clamp(7rem,12vw,8.5rem) 0 clamp(3rem,5vw,4rem)}
.page-hero-title{font-size:clamp(2rem,5vw,3.25rem);font-weight:700;margin-bottom:.875rem}
.page-hero-sub{font-size:clamp(.9rem,1.5vw,1.05rem);color:rgba(248,250,252,.68);max-width:560px;line-height:1.75}

/* ── BREADCRUMB ──────────────────────────────────────────── */
.breadcrumb{display:flex;align-items:center;gap:.5rem;margin-bottom:1.5rem}
.breadcrumb a,.breadcrumb span{font-size:.75rem;color:rgba(248,250,252,.5)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .sep{color:rgba(248,250,252,.25)}
.breadcrumb .current{color:var(--accent)}

/* ── DIVIDER ─────────────────────────────────────────────── */
.line-divider{width:100%;height:1px;background:var(--glass-border);margin:0}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr 1fr}
  .footer-brand{grid-column:span 3}
}
@media(max-width:768px){
  .nav-links,.nav-actions .btn-ghost{display:none}
  .hamburger{display:flex}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:span 2}
  .footer-bottom{flex-direction:column;text-align:center}
  .fab-group{bottom:1rem;right:1rem}
}
@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr}
  .footer-brand{grid-column:span 1}
  .nl-form{flex-direction:column}
}