/* =====================================================
   FISH INC. — shared landing + legal + form styles
   Store-listing inspired, ocean theme
   ===================================================== */

:root{
  --c-blue:        #0e8fd6;
  --c-blue-hover:  #0b7cbd;
  --c-blue-deep:   #075b8c;
  --c-gold:        #f5b400;
  --c-gold-deep:   #c98f00;
  --c-text:        #16242e;
  --c-text-2:      #34495a;
  --c-muted:       #5f7686;
  --c-border:      #d7e2ea;
  --c-bg:          #ffffff;
  --c-bg-2:        #eef4f8;
  --c-ocean:       #e6f3fb;
  --shadow-sm: 0 1px 2px rgba(16,36,46,.08), 0 1px 3px rgba(16,36,46,.06);
  --shadow-md: 0 1px 3px rgba(16,36,46,.12), 0 4px 12px rgba(16,36,46,.10);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
body{
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  overflow-x: hidden;
}
a{ color: var(--c-blue); text-decoration: none; }
a:hover{ text-decoration: underline; }
img{ display: block; max-width: 100%; }

/* ========== TOP NAV ========== */
.nav{
  position: sticky; top: 0; z-index: 900;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--c-border);
}
.nav__inner{
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 32px;
}
.nav__brand{
  display: flex; align-items: center; gap: 12px;
  font-weight: 700; font-size: 17px; color: var(--c-text);
}
.nav__brand img{ width: 36px; height: 36px; border-radius: 9px; box-shadow: var(--shadow-sm); }
.nav__links{
  margin-left: auto; display: flex; gap: 22px; align-items: center;
}
.nav__links a{ color: var(--c-text-2); font-size: 14px; font-weight: 500; }
.nav__links a:hover{ color: var(--c-blue); text-decoration: none; }

/* ========== BUTTONS / STORE BADGES ========== */
.store-row{ display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.store-btn{
  display: inline-flex; align-items: center; gap: 12px;
  background: #16242e; color: #fff;
  padding: 10px 18px; border-radius: 14px;
  min-height: 56px; min-width: 190px;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  text-decoration: none;
}
.store-btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
.store-btn svg{ width: 28px; height: 28px; flex-shrink: 0; }
.store-btn__txt{ display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store-btn__txt small{ font-size: 11px; opacity: .85; font-weight: 400; }
.store-btn__txt span{ font-size: 18px; font-weight: 700; letter-spacing: .2px; }
.store-btn.is-disabled{
  opacity: .55; cursor: not-allowed; pointer-events: none;
  background: #5f7686;
}
.store-btn.is-disabled .store-btn__txt small::after{ content: " · Coming soon"; }

.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--c-blue); color: #fff;
  font-weight: 600; font-size: 15px; letter-spacing: .2px;
  padding: 12px 28px; border: none; border-radius: 999px;
  cursor: pointer; text-decoration: none; min-height: 46px;
  transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.btn:hover{ background: var(--c-blue-hover); box-shadow: var(--shadow-sm); text-decoration: none; }
.btn:active{ transform: translateY(1px); }
.btn--gold{ background: var(--c-gold); color: #16242e; }
.btn--gold:hover{ background: var(--c-gold-deep); }

/* ========== DOWNLOAD CTA (prominent) ========== */
.download-cta{
  margin-top: 28px;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #0e8fd6 0%, #075b8c 100%);
  box-shadow: 0 10px 30px rgba(7,91,140,.30);
  position: relative;
  overflow: hidden;
}
.download-cta::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(120px 60px at 12% 0%, rgba(255,255,255,.18), transparent 70%);
  pointer-events:none;
}
.download-cta__label{
  display:flex; align-items:center; gap:8px;
  color:#eaf6ff; font-weight:700; font-size:14px; letter-spacing:.4px;
  text-transform:uppercase; margin:0 0 14px;
}
.download-cta__label .pin{ animation: bob 2.4s ease-in-out infinite; display:inline-block; }
.download-cta .store-row{ margin:0; }

/* Bigger, glowing store buttons */
.store-btn{
  min-height: 64px; min-width: 210px; padding: 12px 22px;
  border: 1px solid rgba(255,255,255,.14);
}
.store-btn svg{ width: 30px; height: 30px; }
.store-btn__txt span{ font-size: 19px; }
.store-btn:not(.is-disabled){
  background: #0c1c26;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  animation: btnGlow 3.2s ease-in-out infinite;
}
.store-btn:not(.is-disabled):hover{ transform: translateY(-3px) scale(1.02); }
@keyframes btnGlow{
  0%,100%{ box-shadow: 0 6px 18px rgba(0,0,0,.28); }
  50%{ box-shadow: 0 6px 26px rgba(255,255,255,.30); }
}

/* ========== HERO ========== */
.hero{ padding: 56px 32px 40px; position: relative; overflow: hidden; background:
  linear-gradient(180deg, var(--c-ocean) 0%, #ffffff 100%); }
.hero__inner{ max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; }

/* floating pixel bubbles */
.bubbles{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.bubbles i{
  position:absolute; bottom:-30px; width:10px; height:10px; border-radius:0;
  background: rgba(14,143,214,.18);
  box-shadow: inset 0 0 0 2px rgba(14,143,214,.30);
  image-rendering: pixelated;
  animation: rise linear infinite;
}
.bubbles i:nth-child(1){ left:8%;  width:8px;  height:8px;  animation-duration:9s;  animation-delay:0s; }
.bubbles i:nth-child(2){ left:20%; width:14px; height:14px; animation-duration:12s; animation-delay:2s; }
.bubbles i:nth-child(3){ left:34%; width:6px;  height:6px;  animation-duration:8s;  animation-delay:1s; }
.bubbles i:nth-child(4){ left:52%; width:12px; height:12px; animation-duration:11s; animation-delay:4s; }
.bubbles i:nth-child(5){ left:67%; width:9px;  height:9px;  animation-duration:10s; animation-delay:1.5s; }
.bubbles i:nth-child(6){ left:80%; width:16px; height:16px; animation-duration:13s; animation-delay:3s; }
.bubbles i:nth-child(7){ left:90%; width:7px;  height:7px;  animation-duration:9.5s; animation-delay:.5s; }
@keyframes rise{
  0%{ transform: translateY(0) translateX(0); opacity:0; }
  10%{ opacity:1; }
  50%{ transform: translateY(-220px) translateX(10px); }
  90%{ opacity:1; }
  100%{ transform: translateY(-440px) translateX(-8px); opacity:0; }
}

/* gentle bob for the app icon (like a bobber) */
.app-icon{ animation: bob 4s ease-in-out infinite; }
@keyframes bob{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-7px) rotate(-1.5deg); }
}
.app-row{ display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.app-icon{
  width: 144px; height: 144px; border-radius: 30px; overflow: hidden;
  box-shadow: var(--shadow-md); flex-shrink: 0;
}
.app-icon img{ width: 100%; height: 100%; object-fit: cover; }
.app-meta{ display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.app-title{
  font-weight: 700; font-size: 38px; line-height: 1.1; margin: 0;
  color: var(--c-text); letter-spacing: -0.6px;
}
.app-publisher{ font-size: 14px; color: var(--c-blue-deep); font-weight: 600; margin: 0; }
.badge{
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff4d6; color: var(--c-gold-deep);
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  width: fit-content;
}
.badge .dot{
  width: 8px; height: 8px; border-radius: 50%; background: var(--c-gold);
  box-shadow: 0 0 0 4px rgba(245,180,0,.22);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow: 0 0 0 4px rgba(245,180,0,.22); }
  50%{ box-shadow: 0 0 0 8px rgba(245,180,0,.05); }
}
.hero__subtitle{
  margin: 26px 0 0; font-size: 17px; line-height: 1.6;
  color: var(--c-text-2); max-width: 720px;
}
.hero__subtitle strong{ color: var(--c-text); font-weight: 600; }
.hero .store-row{ margin-top: 24px; }

.quick-pills{
  display: flex; flex-wrap: wrap; gap: 28px;
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--c-border);
}
.quick-pill{ display: flex; flex-direction: column; gap: 2px; }
.quick-pill__label{ font-size: 12px; color: var(--c-muted); }
.quick-pill__value{ font-size: 14px; font-weight: 600; color: var(--c-text); }

/* animated pixel wave divider under the hero */
.wave-divider{ position: relative; height: 26px; line-height: 0; overflow: hidden; background:#fff; }
.wave-divider svg{ position:absolute; bottom:0; left:0; width:200%; height:100%;
  animation: waveSlide 9s linear infinite; }
@keyframes waveSlide{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ========== SECTIONS ========== */
.section{ max-width: 1100px; margin: 0 auto; padding: 36px 32px; }
.section__title{
  font-weight: 700; font-size: 24px; margin: 0 0 20px;
  color: var(--c-text); letter-spacing: -0.3px;
}

/* ========== SCREENSHOTS ========== */
.screens-row{
  display: flex; gap: 16px; overflow-x: auto; padding: 8px 0 24px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.screens-row::-webkit-scrollbar{ height: 6px; }
.screens-row::-webkit-scrollbar-thumb{ background: var(--c-border); border-radius: 3px; }
.screen{
  flex-shrink: 0; width: 220px; height: 477px; border-radius: var(--radius-md);
  overflow: hidden; background: #000; scroll-snap-align: start; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.screen:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.screen img{ width: 100%; height: 100%; object-fit: cover; }

/* ========== ABOUT ========== */
.about-text{ font-size: 15px; line-height: 1.7; color: var(--c-text-2); max-width: 820px; }
.about-text p{ margin: 0 0 14px; }
.about-text strong{ color: var(--c-text); font-weight: 600; }
.keyword-cloud{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.kw{
  display: inline-block; padding: 6px 14px; background: var(--c-bg-2);
  color: var(--c-text-2); border-radius: 999px; font-size: 13px; font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.kw:hover{ background: var(--c-ocean); color: var(--c-blue-deep); }

/* ========== FEATURES ========== */
.features-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px;
}
.feature-card{
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--radius-md); padding: 24px;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.feature-card:hover{ box-shadow: var(--shadow-md); border-color: transparent; transform: translateY(-4px); }
.feature-card .ico{ font-size: 30px; margin-bottom: 10px; display:inline-block; transition: transform .2s ease; }
.feature-card:hover .ico{ animation: bob 1.2s ease-in-out infinite; }

/* scroll reveal */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in{ opacity:1; transform: none; }
.feature-card h3{ font-weight: 700; font-size: 16px; margin: 0 0 8px; color: var(--c-text); }
.feature-card p{ font-size: 14px; color: var(--c-muted); margin: 0; line-height: 1.55; }

/* ========== FINAL CTA ========== */
.final-cta{
  max-width: 1100px; margin: 0 auto; padding: 52px 32px 64px;
  text-align: center; border-top: 1px solid var(--c-border);
}
.final-cta h2{ font-weight: 700; font-size: 30px; margin: 0 0 12px; color: var(--c-text); letter-spacing: -0.4px; }
.final-cta p{ font-size: 15px; color: var(--c-muted); margin: 0 auto 26px; max-width: 560px; }
.final-cta .store-row{ justify-content: center; }

/* ========== LEGAL / CONTENT PAGES ========== */
.page-head{
  background: linear-gradient(180deg, var(--c-ocean) 0%, #ffffff 100%);
  padding: 48px 32px 32px;
}
.page-head__inner{ max-width: 820px; margin: 0 auto; }
.page-head h1{ font-size: 32px; font-weight: 700; margin: 0; letter-spacing: -0.4px; }
.page-head .updated{ color: var(--c-muted); font-size: 13px; margin: 10px 0 0; }
.content{ max-width: 820px; margin: 0 auto; padding: 16px 32px 56px; }
.content h2{ font-size: 20px; font-weight: 700; margin: 32px 0 10px; color: var(--c-text); }
.content h3{ font-size: 16px; font-weight: 700; margin: 22px 0 8px; color: var(--c-text); }
.content p, .content li{ font-size: 15px; line-height: 1.7; color: var(--c-text-2); }
.content ul{ padding-left: 22px; }
.content li{ margin: 6px 0; }
.content a{ color: var(--c-blue); }
.content .lead{ font-size: 16px; color: var(--c-text-2); }
.content table{ width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; }
.content th, .content td{ border: 1px solid var(--c-border); padding: 10px 12px; text-align: left; vertical-align: top; }
.content th{ background: var(--c-bg-2); font-weight: 600; }

/* ========== CONTACT FORM ========== */
.form-card{
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--radius-md); padding: 28px; box-shadow: var(--shadow-sm);
}
.field{ margin-bottom: 18px; }
.field label{ display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--c-text); }
.field input, .field select, .field textarea{
  width: 100%; padding: 12px 14px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: #fff; color: var(--c-text); transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(14,143,214,.15);
}
.field textarea{ resize: vertical; min-height: 140px; }
.field .hint{ font-size: 12px; color: var(--c-muted); margin-top: 6px; }
.checkbox-row{ display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--c-text-2); }
.checkbox-row input{ width: auto; margin-top: 3px; }
.form-msg{ margin-top: 16px; padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; display: none; }
.form-msg.ok{ display: block; background: #e3f6ec; color: #1b6b3f; }
.form-msg.err{ display: block; background: #fdecec; color: #a32626; }
.hp-field{ position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* ========== FOOTER ========== */
.footer{ padding: 36px 32px; background: var(--c-bg-2); color: var(--c-muted); font-size: 13px; line-height: 1.7; }
.footer__inner{ max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; }
.footer__brand{ display: flex; align-items: center; gap: 12px; }
.footer__brand img{ height: 28px; }
.footer__links{ display: flex; flex-wrap: wrap; gap: 18px; }
.footer__links a{ color: var(--c-text-2); font-weight: 500; }
.footer__copy{ width: 100%; text-align: center; margin-top: 18px; font-size: 12px; }

/* ========== STICKY MOBILE CTA ========== */
.sticky-install{
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-top: 1px solid var(--c-border);
  transform: translateY(110%); transition: transform .25s ease;
  box-shadow: 0 -2px 12px rgba(16,36,46,.10);
}
.sticky-install.is-visible{ transform: translateY(0); }
.sticky-install .btn{ width: 100%; font-size: 16px; min-height: 50px; }

/* ========== RESPONSIVE ========== */
@media (max-width: 720px){
  .nav__inner{ padding: 10px 18px; }
  .nav__links{ gap: 14px; }
  .nav__links a{ font-size: 13px; }
  .sticky-install{ display: block; }
  body{ padding-bottom: 80px; }
  .hero{ padding: 32px 20px; }
  .app-row{ gap: 20px; }
  .app-icon{ width: 96px; height: 96px; border-radius: 22px; }
  .app-title{ font-size: 27px; }
  .section{ padding: 26px 20px; }
  .final-cta{ padding: 36px 20px 48px; }
  .screen{ width: 180px; height: 390px; }
  .page-head{ padding: 32px 20px 24px; }
  .page-head h1{ font-size: 26px; }
  .content{ padding: 12px 20px 48px; }
  .store-btn{ flex: 1 1 100%; }
  .download-cta{ padding: 18px; }
}

/* ========== MOTION PREFERENCE ========== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation: none !important;
    transition: none !important;
  }
  .reveal{ opacity:1; transform:none; }
}