/* Wright Submarine Co. — Styles */
:root{
  --bg:#081826;
  --bg-2:#0a2540;
  --ink:#e6f2ff;
  --muted:#9db3c7;
  --brand:#00c2ff;
  --brand-2:#2df2cf;
  --accent:#ffd166;
  --card:#0e2b46;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica,Arial,sans-serif; color:var(--ink);
  background: radial-gradient(1200px 800px at 80% -10%, #0b2d4d 0%, transparent 60%),
              radial-gradient(900px 700px at -10% 20%, #0a2a41 0%, transparent 60%),
              linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
img,video{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
a.link{color:var(--brand); text-decoration:underline}
a.link:hover{color:var(--brand-2)}
.container{width:min(1200px, 92%); margin-inline:auto}
.muted{color:var(--muted)}

/* Nav */
.nav{position:sticky; top:0; z-index:1000; backdrop-filter:saturate(160%) blur(12px); background:rgba(10,37,64,.55); border-bottom:1px solid rgba(255,255,255,.06)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:.9rem 0}
.brand{font-weight:700; letter-spacing:.4px}
.links a{margin-left:1.2rem; opacity:.9}
.links a:hover{opacity:1; color:var(--brand)}

/* Hero */
.hero{position:relative; min-height:92vh; display:grid; align-items:center; overflow:hidden}
.bg-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(110%) contrast(105%); z-index:0}
.yt-bg{position:absolute; inset:0; overflow:hidden; z-index:0}
.yt-bg iframe{position:absolute; inset:0; width:120%; height:120%; margin:-10%; border:0; pointer-events:none; filter:saturate(110%) contrast(105%)}
.dm-bg{position:absolute; inset:0; overflow:hidden; z-index:1}
.dm-bg iframe{position:absolute; inset:0; width:120%; height:120%; margin:-10%; border:0; pointer-events:none; filter:saturate(110%) contrast(105%)}
.dm-poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(110%) contrast(105%); z-index:0}
.overlay{position:absolute; inset:0; background:radial-gradient(60% 60% at 70% 10%, rgba(0,0,0,.0) 0%, rgba(0,0,0,.45) 60%), linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(8,24,38,.9) 70%); z-index:2}
.hero-inner{position:relative; padding:14vh 0 12vh; z-index:3}
.headline{font-size:clamp(2rem,4.8vw,4rem); line-height:1.05; margin:0 0 .6rem}
.sub{font-size:clamp(1rem,1.5vw,1.2rem); color:#d4e7ff; max-width:60ch}
.cta{margin-top:1.5rem; display:flex; gap:.8rem; flex-wrap:wrap}
.wave{position:absolute; left:0; right:0; bottom:-1px; width:100%; height:120px; fill:var(--bg)}
/* Bubbles overlay */
.bubbles{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:4}
.bubbles .bubble{position:absolute; bottom:-12vh; left:var(--x,50%); width:var(--size,12px); height:var(--size,12px); border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.2) 60%, rgba(255,255,255,0) 70%);
  opacity:.35; animation:rise var(--dur,18s) linear infinite; animation-delay:var(--delay, -5s); filter:saturate(120%)}
@keyframes rise{from{transform:translateY(0) translateX(0)} to{transform:translateY(-115vh) translateX(12px)}}

/* Page sections */
.page-hero{position:relative; padding:5rem 0 2rem; background:radial-gradient(60% 60% at 70% 10%, rgba(0,194,255,.08), transparent 60%), linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%)}
.page-hero .page-hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(110%) contrast(105%); z-index:0}
.page-hero .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(8,24,38,.85) 70%); z-index:1}
.page-hero .container{position:relative; z-index:2}
.section{padding:2.6rem 0}
.pad{padding:1rem 1.2rem}
.leadship{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); padding:1.2rem; border-radius:1rem; box-shadow:var(--shadow)}

/* Buttons */
.btn{display:inline-block; padding:.9rem 1.2rem; border-radius:.7rem; font-weight:600; transition:.25s transform, .25s box-shadow, .25s background}
.btn-primary{background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#001522; box-shadow:var(--shadow)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{border:1px solid rgba(255,255,255,.18); color:#e8f4ff}
.btn-ghost:hover{background:rgba(255,255,255,.06)}

/* Features */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:3rem auto 4rem}
.feature{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); padding:1.4rem; border:1px solid rgba(255,255,255,.08); border-radius:1rem; box-shadow:var(--shadow)}
.feature h3{margin:.2rem 0 .4rem}

/* Showcase */
.showcase{padding:3.5rem 0 2rem; background:radial-gradient(700px 400px at 90% 0%, rgba(45,242,207,.08), transparent 70%)}
.show-head{display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.2rem}
.show-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:1rem; overflow:hidden; box-shadow:var(--shadow)}
.card img{width:100%; height:100%; display:block; object-fit:cover}
.ratio-16x9{aspect-ratio:16/9}
.ratio-16x9 iframe{width:100%; height:100%; border:0; display:block}

/* Owner */
.owner{padding:4rem 0}
.owner-head{display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.2rem}
.slider-wrap{position:relative; max-width:760px; margin-inline:auto; padding:0 1rem}
.slider{display:flex; gap:0; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.slider::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%; min-width:100%; aspect-ratio:3/4; margin:0 .6rem; scroll-snap-align:center; border-radius:1rem; overflow:hidden; border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow)}
.slide img{width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform .6s ease}
.slide:hover img{transform:scale(1.06)}
.slider-btn{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(10,37,64,.6); color:#fff; font-size:26px; display:grid; place-items:center; cursor:pointer}
.slider-btn:hover{background:rgba(10,37,64,.85)}
.slider-btn.prev{left:6px}
.slider-btn.next{right:6px}

.slider-wrap .dots{display:flex; gap:6px; justify-content:center; margin-top:.6rem}
.dot{width:9px; height:9px; border-radius:999px; border:0; background:rgba(255,255,255,.35); cursor:pointer; transition:all .25s ease}
.dot:hover{background:rgba(255,255,255,.6)}
.dot.active{background:linear-gradient(135deg, var(--brand), var(--brand-2)); width:24px}

/* Contact */
.contact{padding:4rem 0 5rem; background:radial-gradient(700px 400px at 10% 10%, rgba(0,194,255,.12), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01))}
.contact-inner{display:grid; grid-template-columns:1.1fr 1fr; gap:2rem; align-items:start}
.bullets{margin:1rem 0 0; padding:0; list-style:none}
.bullets li{margin:.3rem 0; padding-left:1.1rem; position:relative}
.bullets li::before{content:""; position:absolute; left:0; top:.55rem; width:.5rem; height:.5rem; border-radius:50%; background:linear-gradient(135deg, var(--brand), var(--brand-2))}
.form{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); padding:1.2rem; border-radius:1rem; box-shadow:var(--shadow)}
.form .grid{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
.form input,.form textarea{width:100%; padding:.9rem 1rem; border-radius:.7rem; border:1px solid rgba(255,255,255,.12); background:rgba(7,24,38,.6); color:var(--ink)}
.form input::placeholder,.form textarea::placeholder{color:#9fb3c8}
.form button{margin-top:.8rem}

/* Floating WhatsApp */
.whatsapp{position:fixed; right:18px; bottom:18px; width:56px; height:56px; border-radius:999px; display:grid; place-items:center; background:#25D366; box-shadow:var(--shadow)}
.whatsapp svg{width:28px; height:28px}

/* Footer */
.footer{border-top:1px solid rgba(255,255,255,.08); padding:1.2rem 0; text-align:center; color:var(--muted)}

/* Reveal animation */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease}
.reveal.visible{opacity:1; transform:none}

/* Responsive */
@media (max-width: 900px){
  .features{grid-template-columns:1fr; gap:.8rem}
  .contact-inner{grid-template-columns:1fr;}
  .slide{aspect-ratio:3/4; min-width:100%}
  .slider-btn.prev{left:6px}
  .slider-btn.next{right:6px}
  .show-grid{grid-template-columns:1fr}
}