:root { --ink:#06121a; --deep:#091c27; --cream:#fff1cc; --gold:#ffc346; --hot:#ff7447; --aqua:#7ee7d7; --font-display:Georgia,"Times New Roman",serif; --font-body:"Trebuchet MS",Verdana,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--cream); font-family:var(--font-body); }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
.site { overflow:hidden; min-height:100vh; background:var(--ink); }
.shell { width:min(1180px,calc(100% - 40px)); margin-inline:auto; }
.noise { position:fixed; inset:0; z-index:50; pointer-events:none; opacity:.055; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"); }

.nav { height:82px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,241,204,.18); position:relative; z-index:20; }
.brand { display:flex; align-items:center; gap:13px; font:800 23px/1 var(--font-display); letter-spacing:.02em; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:var(--gold); color:var(--ink); box-shadow:0 0 25px rgba(255,195,70,.5); transform:rotate(-8deg); }
.nav-links,.nav-social { display:flex; align-items:center; gap:10px; }
.nav-links a { padding:11px 15px; border:1px solid rgba(255,241,204,.22); border-radius:3px; font-size:12px; transition:.2s; }
.nav-links a:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
.nav-links .pump-link { background:var(--gold); border-color:var(--gold); color:var(--ink); font-weight:700; }
.nav-links .pump-link:hover { color:var(--ink); box-shadow:0 0 24px rgba(255,195,70,.4); }
.nav-links .source-link { border-color:rgba(126,231,215,.38); color:var(--aqua); }

.hero { min-height:calc(100svh - 82px); display:grid; grid-template-columns:1.03fr .97fr; align-items:center; gap:64px; padding-block:64px 92px; position:relative; }
.hero::before { content:""; position:absolute; width:500px; height:500px; left:-420px; top:12%; border:1px solid rgba(126,231,215,.25); border-radius:50%; box-shadow:0 0 100px rgba(126,231,215,.08); }
.eyebrow { display:flex; align-items:center; gap:11px; color:var(--aqua); font-size:11px; letter-spacing:.16em; font-weight:500; }
.eyebrow span { width:34px; height:2px; background:currentColor; }
.hero h1,.section-heading h2,.source-panel h2 { margin:18px 0 24px; font:900 clamp(66px,8vw,122px)/.82 var(--font-display); letter-spacing:-.055em; text-transform:uppercase; }
.hero h1 em,.section-heading h2 em { color:var(--gold); font-style:normal; text-shadow:0 0 32px rgba(255,195,70,.28); }
.intro { max-width:620px; color:#c8d2d2; font:500 15px/1.72 var(--font-body); }
.contract-wrap { margin-top:32px; max-width:580px; }
.contract-label { display:block; font-size:9px; letter-spacing:.18em; color:#7f969a; margin-bottom:8px; }
.contract { width:100%; display:flex; justify-content:space-between; gap:16px; padding:15px 16px; border:1px solid rgba(255,195,70,.48); border-radius:4px; background:rgba(255,195,70,.08); cursor:pointer; transition:.2s; }
.contract:hover { background:rgba(255,195,70,.14); box-shadow:0 0 24px rgba(255,195,70,.12); }
.contract code { overflow:hidden; text-overflow:ellipsis; color:#d5dcda; font-size:12px; }
.contract strong { color:var(--gold); white-space:nowrap; font-size:11px; letter-spacing:.08em; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.primary-btn,.signal-btn { min-height:48px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; border-radius:3px; border:1px solid var(--hot); font-size:11px; font-weight:700; letter-spacing:.08em; transition:.2s; }
.primary-btn { background:var(--hot); color:var(--ink); }
.primary-btn:hover { transform:translateY(-2px); box-shadow:0 7px 0 #a83d23; }
.signal-btn { background:transparent; border-color:rgba(255,241,204,.28); cursor:pointer; }
.signal-btn span { color:var(--gold); margin-right:8px; }
.signal-btn:hover { border-color:var(--gold); color:var(--gold); }

.hero-visual { position:relative; min-width:0; }
.photo-frame { aspect-ratio:1; position:relative; overflow:hidden; border:1px solid rgba(255,195,70,.65); border-radius:48% 48% 9% 9%; background:#13252d; box-shadow:0 0 0 10px rgba(255,195,70,.045),0 0 70px rgba(255,195,70,.16),0 42px 70px rgba(0,0,0,.45); }
.photo-frame img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.08) contrast(1.05); transition:filter .5s,transform .7s; }
.photo-frame:hover img { transform:scale(1.025); }
.photo-vignette { position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(3,11,16,.82)); pointer-events:none; }
.photo-tag { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); padding:8px 11px; white-space:nowrap; border:1px solid rgba(255,195,70,.5); background:rgba(4,13,19,.76); color:var(--gold); font-size:9px; letter-spacing:.18em; }
.porthole-ring { position:absolute; inset:-24px; border:1px dashed rgba(126,231,215,.26); border-radius:50%; animation:rotate 36s linear infinite; }
.coordinate { position:absolute; z-index:2; padding:7px 9px; background:var(--aqua); color:var(--ink); font-size:8px; font-weight:700; letter-spacing:.1em; transform:rotate(-4deg); }
.c1 { left:-23px; top:13%; }.c2 { right:-25px; bottom:20%; background:var(--hot); transform:rotate(5deg); }
.scroll-cue { position:absolute; left:0; bottom:26px; display:flex; gap:10px; align-items:center; font-size:9px; letter-spacing:.18em; color:#82999c; }
.scroll-cue span { color:var(--gold); animation:bob 1.8s ease-in-out infinite; }

.story { position:relative; padding:120px 0 0; background:linear-gradient(180deg,#102b36 0%,#0b2029 62%,#06121a 100%); border-top:1px solid rgba(126,231,215,.18); }
.story::before { content:""; position:absolute; inset:0; opacity:.25; background-image:linear-gradient(rgba(126,231,215,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(126,231,215,.09) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,#000,transparent 52%); }
.story-inner { position:relative; z-index:3; }
.section-heading { max-width:900px; }
.section-heading h2 { font-size:clamp(58px,8vw,108px); line-height:.82; }
.log-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:65px; }
.log-card { min-height:330px; padding:28px; border:1px solid rgba(255,241,204,.18); background:rgba(4,15,21,.72); display:flex; flex-direction:column; transition:.25s; }
.log-card:hover { border-color:var(--aqua); transform:translateY(-6px); }
.log-card.featured { background:var(--gold); color:var(--ink); border-color:var(--gold); transform:rotate(-1deg); box-shadow:12px 12px 0 rgba(255,116,71,.75); }
.log-card.featured:hover { transform:rotate(-1deg) translateY(-6px); }
.log-number { font:900 74px/1 var(--font-display); color:var(--gold); }
.featured .log-number { color:var(--ink); }
.log-kicker { margin:auto 0 10px; font-size:9px; letter-spacing:.18em; color:var(--aqua); }
.featured .log-kicker { color:#6b4c0a; }
.log-card h3 { margin:0 0 14px; font:800 27px/1 var(--font-display); text-transform:uppercase; }
.log-card p:last-child { margin:0; font-size:11px; line-height:1.65; color:#afc2c3; }
.featured p:last-child { color:#3e350f; }

.meme-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; margin-top:90px; }
.meme-card { min-height:450px; border-radius:6px; overflow:hidden; border:1px solid rgba(255,241,204,.18); }
.meme-photo { position:relative; }
.meme-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.meme-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(3,12,17,.92)); }
.meme-photo p { position:absolute; z-index:2; left:30px; right:30px; bottom:24px; margin:0; color:white; font:800 clamp(32px,4.5vw,58px)/.98 var(--font-display); }
.quote-card { background:var(--hot); color:var(--ink); padding:42px; display:flex; flex-direction:column; justify-content:space-between; transform:rotate(1deg); }
.tiny-label { font-size:9px; letter-spacing:.2em; }
.quote-card blockquote { margin:0; font:900 clamp(39px,5vw,66px)/.96 var(--font-display); }
.paw-line { color:#7c2b17; letter-spacing:1em; white-space:nowrap; }

.meme-strip { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:18px; }
.pirate-meme { min-height:330px; padding:34px; position:relative; overflow:hidden; border:1px solid rgba(255,241,204,.2); display:flex; flex-direction:column; justify-content:space-between; transition:.25s; }
.pirate-meme:hover { transform:translateY(-5px) rotate(-.5deg); box-shadow:0 18px 36px rgba(0,0,0,.24); }
.pirate-meme>span,.image-meme span { font-size:9px; letter-spacing:.18em; opacity:.7; }
.pirate-meme h3 { margin:20px 0 12px; font:900 clamp(35px,4.3vw,62px)/.92 var(--font-display); letter-spacing:-.04em; }
.pirate-meme p { margin:0; font-size:12px; line-height:1.6; }
.gold-meme { background:var(--gold); color:var(--ink); }
.aqua-meme { background:var(--aqua); color:var(--ink); }
.dark-meme { background:#071017; color:var(--cream); }
.image-meme { padding:0; }
.image-meme img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.55) saturate(1.15); }
.image-meme>div { position:absolute; inset:auto 28px 26px; z-index:2; }
.image-meme::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent,rgba(0,0,0,.9)); }

.source-panel { margin-top:100px; padding:70px; border:1px solid rgba(126,231,215,.28); background:linear-gradient(135deg,rgba(126,231,215,.09),rgba(255,195,70,.07)); display:grid; grid-template-columns:1.1fr .9fr; align-items:end; gap:70px; position:relative; }
.source-panel::after { content:"REAL RESCUE • MEME LEGEND • "; position:absolute; right:-52px; top:46px; color:rgba(255,195,70,.36); font:700 10px var(--font-body); letter-spacing:.18em; transform:rotate(90deg); }
.source-panel h2 { font-size:clamp(48px,6.3vw,88px); line-height:.82; }
.source-panel>div>p:last-child { color:#a9bec0; font-size:12px; line-height:1.7; max-width:600px; }
.source-actions { display:grid; gap:11px; }
.source-actions a { display:flex; justify-content:space-between; align-items:center; padding:20px; border:1px solid rgba(255,241,204,.23); font-size:10px; letter-spacing:.1em; transition:.2s; }
.source-actions a:hover { background:var(--cream); color:var(--ink); transform:translateX(5px); }
.source-actions span { color:var(--gold); font-size:18px; }

.floating-cats { position:absolute; inset:0; pointer-events:none; z-index:2; }
.cat-orb { position:absolute; width:82px; aspect-ratio:1; border-radius:50%; overflow:hidden; border:2px solid var(--gold); box-shadow:0 0 24px rgba(255,195,70,.58); animation:float 4s ease-in-out infinite; }
.cat-orb img { width:100%; height:100%; object-fit:cover; transform:scale(1.8); }
.cat-1{top:4%;right:4%;}.cat-2{top:26%;left:2%;animation-delay:-1s}.cat-3{top:43%;right:2%;animation-delay:-2s}.cat-4{top:64%;left:1%;animation-delay:-3s}.cat-5{top:75%;right:4%;animation-delay:-1.5s}.cat-6{top:13%;left:4%;animation-delay:-.5s}

footer { padding:105px 0 36px; background:#06121a; }
.footer-inner { border-top:1px solid rgba(255,241,204,.18); padding-top:28px; display:grid; grid-template-columns:1fr auto; gap:28px; align-items:end; }
.footer-title { font:900 clamp(56px,10vw,150px)/.8 var(--font-display); letter-spacing:-.055em; }
.footer-title em { color:var(--gold); font-style:normal; }
.footer-links { display:flex; gap:9px; }
.footer-links a { padding:10px; border-bottom:1px solid rgba(255,241,204,.25); font-size:9px; }
.footer-links a:hover { color:var(--gold); border-color:var(--gold); }
.footer-inner>p { grid-column:1/-1; color:#577077; font-size:9px; }

.signal-on .photo-frame,.signal-on .cat-orb { box-shadow:0 0 22px var(--gold),0 0 85px rgba(255,195,70,.6); }
.signal-on .photo-frame img { filter:saturate(1.25) contrast(1.1) brightness(1.08); }
.signal-on .porthole-ring { border-color:var(--gold); animation-duration:8s; }
@keyframes rotate { to{transform:rotate(360deg)} }
@keyframes bob { 50%{transform:translateY(6px)} }
@keyframes float { 50%{transform:translateY(-10px) rotate(3deg)} }

@media (max-width:900px) {
  .hero { grid-template-columns:1fr; gap:55px; padding-top:70px; }
  .hero-copy { position:relative; z-index:3; }
  .hero h1 { font-size:clamp(65px,18vw,110px); }
  .hero-visual { width:min(92%,600px); margin:auto; }
  .scroll-cue { display:none; }
  .log-grid { grid-template-columns:1fr; }
  .log-card { min-height:260px; }
  .meme-grid,.source-panel { grid-template-columns:1fr; }
  .source-panel { padding:40px; gap:35px; }
  .cat-orb { width:60px; opacity:.78; }
  .footer-inner { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .shell { width:min(100% - 24px,1180px); }
  .nav { height:auto; min-height:92px; align-items:flex-start; padding-block:12px; gap:10px; }
  .brand { font-size:17px; margin-top:5px; }.brand-mark{width:34px;height:34px}.nav-links{justify-content:flex-end;flex-wrap:wrap;gap:5px}.nav-social{gap:5px}.nav-links a{padding:7px;font-size:8px}.nav-social a:not(.pump-link){display:none}
  .hero { min-height:auto; padding:54px 0 92px; }
  .hero h1 { font-size:clamp(60px,21vw,94px); }
  .intro { font-size:12px; }
  .contract { align-items:center; }.contract code{font-size:10px;}.hero-actions>*{width:100%}
  .coordinate { display:none; }.photo-frame{border-radius:46% 46% 8% 8%}
  .story { padding-top:85px; }
  .section-heading h2 { font-size:58px; }
  .log-grid { margin-top:42px; }
  .meme-grid { margin-top:65px; }.meme-card{min-height:380px}.quote-card{padding:28px}.meme-strip{grid-template-columns:1fr}.pirate-meme{min-height:270px;padding:26px}
  .source-panel { margin-top:70px; padding:26px 20px; }.source-panel::after{display:none}
  .source-panel h2 { font-size:49px; }
  .cat-orb { width:48px; }
  footer { padding-top:80px; }.footer-links{flex-wrap:wrap}.footer-title{font-size:72px}
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} }