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

:root{
  --bg:#0b1120;
  --blue:#6db8f2;
  --teal:#2b8a9a;
  --white:#f2f5ff;
  --dim:#6c7fa0;
  --yellow:#f5d76e;
}

html{scroll-behavior:smooth}

body{
  font-family:'Instrument Sans',sans-serif;
  background:var(--bg);
  color:var(--white);
  overflow-x:hidden;
}

::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#1e2d45;border-radius:3px}

.bg-tex{
  position:fixed;
  inset:-15vh -15vw;
  z-index:0;
  background:url('images/vector.png') center center / 30% auto repeat;
  transform:rotate(10deg);
  animation: drift 25s linear infinite;
  opacity: 0.1;
}

@keyframes drift{
  0%{background-position:0% 0%}
  50%{background-position:12% 10%}
  100%{background-position:0% 0%}
}

.z{position:relative;z-index:1}

nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  padding:1.1rem 2rem;
  display:flex;align-items:center;justify-content:space-between;

  background:rgba(5, 9, 20, 0.5);
  backdrop-filter:blur(3px);
}

.nav-logo{
  font-size:1rem;font-weight:700;
  color:var(--blue);text-decoration:none;
  letter-spacing:0.01em;
}

.nav-logo svg{
  display:block;margin-top:2px;
  overflow:visible;
}

.nav-submit{
  font-size:0.85rem;font-weight:600;
  color:var(--bg);background:var(--blue);
  padding:0.5rem 1.2rem;border-radius:6px;
  text-decoration:none;letter-spacing:0.02em;
  transition:opacity 0.15s;
}

.nav-submit:hover{opacity:0.85}

#hero{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  padding:7rem 6vw 4rem 6vw;
  gap:2rem;
  position:relative;z-index:1;
  overflow:hidden;
}

.hero-left{
  display:flex;flex-direction:column;
  align-items:flex-start;
  gap:0;
}

.scribble-label{
  display:inline-flex;align-items:center;gap:0.5rem;
  font-size:0.78rem;font-weight:500;
  color:var(--dim);letter-spacing:0.06em;
  text-transform:uppercase;margin-bottom:1.4rem;
  position:relative;
}

.hero-logo{
  width:min(520px,80vw);
  display:block;
  margin-bottom:1.6rem;
}

.hero-tagline{
  font-size:clamp(1.05rem,1.8vw,1.25rem);
  font-style:italic;font-weight:400;
  color:var(--dim);
  line-height:1.55;
  max-width:420px;
  margin-bottom:2.4rem;
}

.hero-tagline b{font-style:normal;color:var(--white);font-weight:600}
.hero-btns{display:flex;gap:0.75rem;flex-wrap:wrap;align-items:center}  

.btn-container {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.pure-image-btn, .join-image-btn {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.pure-image-btn img {
  width: 155px; 
  height: 48px;
  display: block;
  object-fit: fill;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.join-image-btn img {
  width: 145px; 
  height: 48px;
  display: block;
  object-fit: fill;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.pure-image-btn:hover img, .join-image-btn:hover img {
  transform: scale(1.04);
  opacity: 0.95;
}

.pure-image-btn:active img, .join-image-btn:active img {
  transform: scale(0.96);
}

.hero-right{
  display:flex;align-items:center;justify-content:center;
  position:relative;
}

.hero-shark-img{
  width:min(600px,200vw);
  transform:rotate(8deg) translateX(8%);
  filter:drop-shadow(-20px 20px 50px rgba(0,0,0,0.6));
  animation:bob 7s ease-in-out infinite;
}

@keyframes bob{
  0%,100%{transform:rotate(8deg) translateX(8%) translateY(0)}
  50%{transform:rotate(6deg) translateX(8%) translateY(-16px)}
}

.hero-stat{
  position:absolute;
  bottom:2rem;left:0;
  display:flex;align-items:center;gap:0.5rem;
  font-size:0.75rem;font-weight:500;color:var(--dim);
}

.dot{width:6px;height:6px;border-radius:50%;background:#3adf98;animation:pulse 2s ease-in-out infinite}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.35}}
@media(max-width:700px){
  #hero{grid-template-columns:1fr;padding:6rem 1.5rem 3rem;text-align:center}
  .hero-left{align-items:center}
  .hero-right{display:none}
  .hero-stat{position:static;justify-content:center;margin-top:1.5rem}
}

#how{
  position:relative;z-index:1;
  padding:5rem 6vw 5rem;
  max-width:800px;margin:0 auto;
}

.how-header{
  display:flex;align-items:flex-end;gap:1.5rem;
  margin-bottom:3.5rem;
}

.how-bignum{
  font-size:7rem;font-weight:700;
  color:rgba(109,184,242,0.08);
  line-height:1;flex-shrink:0;
  user-select:none;
  transform:translateY(12px);
}

.how-heading-wrap h2{
  font-size:clamp(1.7rem,3.5vw,2.4rem);
  font-weight:700;line-height:1.15;
}

.how-heading-wrap p{
  font-size:0.93rem;color:var(--dim);margin-top:0.4rem;line-height:1.6;
}

.steps{display:flex;flex-direction:column;gap:0}

.step{
  display:grid;
  grid-template-columns:3.5rem 1fr;
  gap:0 1.8rem;
  padding:2rem 0;
  border-top:1px solid rgba(255,255,255,0.07);
  align-items:start;
  position:relative;
}

.step:last-child{border-bottom:1px solid rgba(255,255,255,0.07)}

.step-n{
  font-size:0.72rem;font-weight:600;
  color:var(--blue);opacity:0.6;
  padding-top:0.2rem;letter-spacing:0.1em;
  font-style:italic;
}

.step-body h3{
  font-size:1.05rem;font-weight:700;
  margin-bottom:0.45rem;line-height:1.3;
}

.step-body p{
  font-size:0.9rem;color:var(--dim);
  line-height:1.72;max-width:560px;
}

.step-shark-wrap{
  position:absolute;right:-2rem;top:60%;
  width:clamp(100px,12vw,170px);
  pointer-events:none;
  animation:bobby 6s ease-in-out infinite;
  animation-delay:1.2s;
}

@keyframes bobby{
  0%,100%{transform:rotate(-0) translateX(8%) translateY(0)}
  50%{transform:rotate(-0) translateX(8%) translateY(-16px)}
}

@media(max-width:700px){
  .step-shark-wrap{display:none}
  #how{padding:4rem 1.5rem}
  .how-bignum{font-size:4rem}
}

.sticky{
  margin-top:2.8rem;
  background:#1a2e1f;
  border-left:3px solid #3adf98;
  padding:1.1rem 1.4rem;
  border-radius:0 10px 10px 0;
  max-width:600px;
  transform:rotate(-0.4deg);
}

.sticky p{font-size:0.88rem;color:#8ab89a;line-height:1.7}
.sticky strong{color:#bde8c8;font-weight:600}

#faq{
  position:relative;z-index:1;
  padding:5rem 6vw 6rem;
  max-width:800px;margin:0 auto;
}

.faq-header{
  margin-bottom:2.8rem;
  display:flex;align-items:baseline;gap:1rem;
}

.faq-header h2{
  font-size:clamp(1.7rem,3.5vw,2.4rem);font-weight:700;
}

.faq-title-wrap{position:relative;display:inline-block}

.faq-item{border-bottom:1px solid rgba(255,255,255,0.07)}
.faq-item:first-of-type{border-top:1px solid rgba(255,255,255,0.07)}

.faq-btn{
  width:100%;background:none;border:none;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:1.1rem 0;gap:1.5rem;
  font-family:'Instrument Sans',sans-serif;
  font-size:0.95rem;font-weight:600;
  color:var(--white);text-align:left;cursor:pointer;
  transition:color 0.15s;
  line-height:1.4;
}

.faq-btn:hover{color:var(--blue)}

.faq-plus{
  flex-shrink:0;margin-top:2px;
  font-size:1.2rem;font-weight:300;
  color:var(--dim);line-height:1;
  transition:transform 0.25s,color 0.15s;
}

.faq-item.open .faq-plus{transform:rotate(45deg);color:var(--blue)}

.faq-ans{
  max-height:0;overflow:hidden;
  transition:max-height 0.3s ease;
}

.faq-ans-inner{
  padding-bottom:1.1rem;
  font-size:0.9rem;color:var(--dim);line-height:1.75;
}

.faq-ans a{color:var(--blue);text-decoration:none}
.faq-ans a:hover{text-decoration:underline}

footer{
  position:relative;z-index:1;
  padding:3rem 6vw;
  border-top:1px solid rgba(255,255,255,0.07);
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1.5rem;

  background-color: rgba(5, 9, 20, 0.5);
  backdrop-filter: blur(3px);
}

.footer-logo{width:min(260px,50vw);opacity:0.75}

.footer-right{
  font-size:0.85rem;color:var(--dim);
  text-align:right;line-height:1.8;
}

.footer-right a{color:var(--blue);text-decoration:none}
.footer-right a:hover{text-decoration:underline}

@media(max-width:600px){
  footer{flex-direction:column;align-items:flex-start}
  .footer-right{text-align:left}
}

.r{opacity:0;transform:translateY(18px);transition:opacity 0.5s ease,transform 0.5s ease}
.r.in{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}