*{margin:0;padding:0;box-sizing:border-box}

:root{
  --ink:#04060a;
  --ink2:#080b12;
  --panel:#0c1018;
  --text:#e8ecf2;
  --dim:#9aa4b2;
  --gold:#c9a84c;
  --gold-lt:#e8c65a;
  --danger:#c0392b;
  --danger-lt:#e2564a;
  --sea:#0a1a2a;
  --sea-lt:#12324d;
  --font:'Inter',system-ui,sans-serif;
  --display:'Cinzel',serif;
}

html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--text);font-family:var(--font);overflow-x:hidden;line-height:1.65}

.wrap{max-width:1000px;margin:0 auto;padding:0 1.5rem}

/* ============================ HERO ============================ */
#hero{
  position:relative;
  height:100vh;
  min-height:640px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.storm-sky{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% 120%, #123049 0%, transparent 55%),
    linear-gradient(180deg, #04060a 0%, #070c14 40%, #0a1622 70%, #0a1a2a 100%);
}
/* backlight so the ship reads as a silhouette */
.moon{
  position:absolute;
  left:50%;top:33%;
  width:min(66vw,600px);height:min(66vw,600px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,
     rgba(226,232,240,.9) 0%,
     rgba(198,214,235,.55) 14%,
     rgba(150,175,205,.28) 30%,
     rgba(90,120,160,.12) 48%,
     transparent 66%);
  z-index:1;
  pointer-events:none;
}

.clouds{
  position:absolute;inset:0;
  background:
    radial-gradient(60% 40% at 20% 18%, rgba(20,28,40,.9), transparent 70%),
    radial-gradient(50% 34% at 75% 12%, rgba(16,24,36,.85), transparent 70%),
    radial-gradient(70% 44% at 50% -6%, rgba(8,12,20,.95), transparent 70%);
  filter:blur(6px);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translateX(-24px)}to{transform:translateX(24px)}}

.lightning{
  position:absolute;inset:0;
  background:radial-gradient(80% 60% at 50% 8%, rgba(180,205,255,.55), transparent 60%);
  opacity:0;
  pointer-events:none;
  animation:flash 9s linear infinite;
}
@keyframes flash{
  0%,100%{opacity:0}
  92%{opacity:0}
  93%{opacity:.9}
  94%{opacity:.15}
  95%{opacity:.75}
  96.5%{opacity:0}
}

/* ship */
#ship{
  position:absolute;
  left:50%;
  bottom:27%;
  width:min(86vw,660px);
  transform:translateX(-50%);
  transform-origin:50% 92%;
  filter:drop-shadow(0 8px 30px rgba(0,0,0,.9));
  z-index:2;
}

/* sea */
#sea{
  position:absolute;
  left:0;bottom:0;
  width:100%;
  height:50vh;
  z-index:3;
}

/* churning water + rising bubbles where the stern goes under */
#sink-fx{
  position:absolute;
  left:31%;
  bottom:44vh;
  width:min(38vw,300px);
  height:140px;
  z-index:4;
  pointer-events:none;
}
.foam{
  position:absolute;left:0;bottom:0;width:100%;height:64px;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 62%, rgba(222,234,248,.5), rgba(150,180,210,.22) 46%, transparent 72%);
  filter:blur(3px);
  animation:foamPulse 3s ease-in-out infinite;
}
@keyframes foamPulse{0%,100%{transform:scaleX(1);opacity:.75}50%{transform:scaleX(1.14);opacity:1}}
.bub{
  position:absolute;bottom:26px;
  width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(230,240,250,.9), rgba(150,180,210,.35));
  opacity:0;
  animation:bubRise 3.4s linear infinite;
}
.b1{left:22%}
.b2{left:38%;width:6px;height:6px;animation-delay:.6s}
.b3{left:52%;animation-delay:1.2s}
.b4{left:66%;width:7px;height:7px;animation-delay:1.8s}
.b5{left:44%;width:5px;height:5px;animation-delay:2.3s}
.b6{left:30%;width:8px;height:8px;animation-delay:2.9s}
@keyframes bubRise{
  0%{transform:translateY(0) scale(.6);opacity:0}
  15%{opacity:.85}
  100%{transform:translateY(-96px) scale(1);opacity:0}
}
.wave{fill:var(--sea)}
.wave-back{fill:#0c2439;opacity:.8;animation:sway 11s ease-in-out infinite alternate}
.wave-mid{fill:#123c58;opacity:.9;animation:sway 8s ease-in-out infinite alternate-reverse}
.wave-front{fill:#1a5077;animation:sway 6s ease-in-out infinite alternate}
@keyframes sway{from{transform:translateX(-30px)}to{transform:translateX(30px)}}

.rain{
  position:absolute;left:0;top:-100%;width:100%;height:200%;z-index:4;pointer-events:none;opacity:.4;
  background-image:repeating-linear-gradient(100deg, rgba(180,200,225,.13) 0 1px, transparent 1px 9px);
  animation:rain .6s linear infinite;
  will-change:transform;
}
@keyframes rain{from{transform:translateY(0)}to{transform:translateY(50%)}}

.hero-copy{
  position:relative;z-index:6;
  text-align:center;
  padding:2.5rem 1.4rem 7vh;
  max-width:820px;
}
.hero-copy:before{
  content:'';position:absolute;left:50%;top:14%;transform:translateX(-50%);
  width:150vw;height:120%;z-index:-1;pointer-events:none;
  background:radial-gradient(55% 60% at 50% 60%, rgba(4,6,10,.5) 0%, rgba(4,6,10,.25) 50%, transparent 78%);
}
.kicker{
  font-family:var(--display);
  letter-spacing:.42em;
  font-size:.72rem;
  color:var(--danger-lt);
  margin-bottom:1.1rem;
  text-shadow:0 2px 12px rgba(0,0,0,.9);
}
.hero-copy h1{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(2.6rem,7.5vw,5.4rem);
  line-height:1.02;
  letter-spacing:.01em;
  text-shadow:0 4px 30px rgba(0,0,0,.85);
}
.hero-copy h1 .sink{
  color:var(--danger-lt);
  text-shadow:0 0 40px rgba(192,57,43,.5),0 4px 30px rgba(0,0,0,.85);
}
.hero-sub{
  margin:1.5rem auto 0;
  max-width:600px;
  font-size:clamp(1rem,2.2vw,1.25rem);
  font-weight:300;
  color:#d6dce6;
  text-shadow:0 2px 14px rgba(0,0,0,.9);
}
.scroll-cue{
  margin-top:2.4rem;display:flex;flex-direction:column;align-items:center;gap:.6rem;
  opacity:.7;animation:bob 2s ease-in-out infinite;
}
.scroll-cue span{font-size:.6rem;letter-spacing:.35em;color:var(--dim)}
.scroll-cue i{width:14px;height:14px;border-right:1px solid var(--dim);border-bottom:1px solid var(--dim);transform:rotate(45deg)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}

/* ============================ SUMMARY BAND ============================ */
.band{
  background:linear-gradient(180deg,#0a1a2a,#04060a);
  padding:clamp(4rem,10vw,7rem) 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.lead{font-size:clamp(1.25rem,3vw,1.7rem);font-weight:300;line-height:1.6;text-align:center}
.lead strong{font-weight:700;color:#fff}
.lead.dim{margin-top:1.6rem;font-size:1rem;color:var(--dim)}

/* ============================ SECTIONS ============================ */
.section{padding:clamp(4rem,9vw,7rem) 0;position:relative}
.section h2{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(1.9rem,5vw,3.1rem);
  line-height:1.1;
  margin-bottom:2.4rem;
  text-align:center;
}
.section h2 .vs{color:var(--danger-lt);font-style:italic}
.section-note{text-align:center;color:var(--dim);margin:-1.6rem auto 2.6rem;max-width:560px;font-size:.95rem}

/* compare */
.compare{display:flex;flex-direction:column;gap:1rem}
.compare-row{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
}
.paid,.got{
  background:var(--panel);border:1px solid rgba(255,255,255,.07);border-radius:12px;
  padding:1.5rem 1.4rem;font-size:1.02rem;position:relative;
}
.paid{border-left:3px solid var(--gold)}
.got{border-left:3px solid var(--danger)}
.tag{display:block;font-size:.62rem;letter-spacing:.22em;font-weight:700;color:var(--gold);margin-bottom:.6rem}
.tag.bad{color:var(--danger-lt)}

/* text thread */
.thread{max-width:620px;margin:0 auto;display:flex;flex-direction:column;gap:.7rem}
.msg{max-width:80%;padding:.85rem 1.1rem;border-radius:18px;font-size:1rem;line-height:1.5;position:relative}
.msg .who{display:block;font-size:.6rem;letter-spacing:.12em;color:var(--dim);margin-bottom:.35rem;text-transform:uppercase}
.msg.them{align-self:flex-start;background:#20252e;border-bottom-left-radius:5px}
.msg.me{align-self:flex-end;background:#1d4ed8;color:#fff;border-bottom-right-radius:5px}
.photo-chip{display:inline-block;margin-left:.4rem;font-size:.8rem;opacity:.85}
.caption{align-self:center;text-align:center;color:var(--danger-lt);font-size:.9rem;font-weight:500;margin:.4rem 0 1.4rem;max-width:90%}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.2rem}
.gallery figure{background:var(--panel);border:1px solid rgba(255,255,255,.07);border-radius:12px;overflow:hidden}
.gallery img{width:100%;height:300px;object-fit:cover;display:block}
.gallery figure.doc img{object-fit:contain;height:380px;background:#05080d;padding:.4rem}
.gallery figcaption{padding:1rem 1.1rem;font-size:.9rem;color:var(--dim)}
.gallery .slot{min-height:300px;display:flex;align-items:center;justify-content:center;border-style:dashed;border-color:rgba(255,255,255,.14)}
.slot-inner{text-align:center;color:var(--dim);font-size:.92rem;padding:1.5rem}
.slot-inner span{display:block;margin-top:.5rem;font-size:.72rem;letter-spacing:.15em;color:#5a6270;text-transform:uppercase}

/* findings */
.findings{max-width:720px;margin:0 auto;list-style:none;display:flex;flex-direction:column;gap:1rem}
.findings li{
  background:var(--panel);border:1px solid rgba(255,255,255,.07);border-left:3px solid var(--danger);
  border-radius:10px;padding:1.3rem 1.5rem;font-size:1.05rem;font-weight:300;
}
.findings strong{font-weight:600;color:#fff}

/* timeline */
.tl{max-width:680px;margin:0 auto;list-style:none;position:relative;padding-left:2rem}
.tl:before{content:'';position:absolute;left:.45rem;top:.5rem;bottom:.5rem;width:2px;background:linear-gradient(var(--danger),transparent)}
.tl li{position:relative;padding:.4rem 0 1.7rem 1.4rem;font-size:1.05rem;font-weight:300}
.tl li:before{content:'';position:absolute;left:-1.72rem;top:.55rem;width:12px;height:12px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 4px rgba(192,57,43,.18)}
.tl .date{display:block;font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.1em;color:var(--gold);margin-bottom:.2rem}

/* closing */
#closing{background:linear-gradient(180deg,#04060a,#0a0405)}
.section h2.big{font-size:clamp(2.4rem,7vw,4rem)}
.closing-copy{max-width:640px;margin:0 auto 3rem;text-align:center;font-size:clamp(1.1rem,2.4vw,1.35rem);font-weight:300;color:#dbe1ea}

.share{max-width:600px;margin:0 auto;background:var(--panel);border:1px solid rgba(201,168,76,.22);border-radius:16px;padding:2.2rem 1.8rem;text-align:center}
.share h3{font-family:var(--display);font-size:1.5rem;margin-bottom:.5rem}
.share p{color:var(--dim);margin-bottom:1.6rem}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:.8rem}
.share input,.share textarea{
  width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:8px;
  padding:.85rem 1rem;color:var(--text);font-family:var(--font);font-size:1rem;
}
.share input:focus,.share textarea:focus{outline:none;border-color:var(--gold)}
.share textarea{margin-bottom:1rem;resize:vertical}
.share button{
  width:100%;padding:1rem;background:var(--danger);color:#fff;border:none;border-radius:8px;
  font-family:var(--display);font-weight:700;letter-spacing:.18em;font-size:.95rem;cursor:pointer;
  transition:background .25s ease,transform .2s ease;
}
.share button:hover{background:var(--danger-lt);transform:translateY(-2px)}
.bot-field{position:absolute;left:-9999px;opacity:0}

.disclaimer{max-width:640px;margin:3rem auto 0;text-align:center;font-size:.78rem;line-height:1.7;color:#5f6773}

/* reveals */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}

/* responsive */
@media(max-width:640px){
  .compare-row{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  #ship{bottom:24%;width:96vw}
  .gallery img,.gallery .slot{height:240px}
}
@media(prefers-reduced-motion:reduce){
  .clouds,.lightning,.rain,.wave{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ============================ INSPECTION / SAFETY ============================ */
.danger-banner{
  max-width:780px;margin:0 auto 2.6rem;
  background:linear-gradient(180deg, rgba(192,57,43,.18), rgba(192,57,43,.06));
  border:1px solid rgba(226,86,74,.45);
  border-left:4px solid var(--danger);
  border-radius:12px;
  padding:1.6rem 1.8rem;
  font-size:clamp(1.05rem,2.4vw,1.25rem);line-height:1.6;font-weight:300;color:#f4dbd7;
}
.danger-label{
  display:inline-block;font-family:var(--display);font-weight:700;letter-spacing:.14em;
  font-size:.72rem;color:#fff;background:var(--danger);padding:.3rem .75rem;border-radius:5px;
  margin-right:.7rem;vertical-align:middle;
}
.attribution{
  max-width:760px;margin:2.2rem auto 0;text-align:right;color:var(--dim);font-size:1rem;font-style:italic;
}
.attribution strong{color:var(--gold-lt);font-style:normal;font-weight:600}

.lead.safety-line{color:var(--danger-lt);margin-top:1.4rem;font-weight:400}
.lead.safety-line strong{color:#fff}

.insp-gallery{margin-top:2.8rem}